thinkpool code — product demo (marketing starting point)

A self-contained, looping HTML animation of ThinkPool Code in action. Built to be the seed asset for marketing — landing-page hero, social clip, README GIF.

Live: https://thinkpool-io.github.io/thinkpool-code-demo/ Source: index.html (identical to code-demo.html) — one file, no build step, no dependencies.

What it shows (two looping scenes)

1. Solo — someone types @pool add a dark-mode toggle to the settings page → Pool drafts the clean instruction → send → Claude streams Read → Edit → build ✓ → done.
2. Collab — two separate devices (phone + laptop) in the same room, the partner steers with @pool also respect the OS setting live, a "typing…" peek appears, both transcripts update in lockstep. Closes on the real product line: "Two people, one Claude agent — you watch it work and steer it together."

Why it looks right

Built against the real /code production tokens (not guessed): console #0a0d10, @pool blue hsl(212 40% 54%), you-gold hsl(40 48% 62%), partner-teal hsl(172 30% 58%), Claude coral #D97757, the real routing model (type / @pool / @claude / //), the real composer chrome, and two separate devices for collab (never a two-lane composer — a deliberate product rule).

How to iterate (for the next marketing pass)

• The story beats + copy are placeholders ("dark-mode toggle"). Swap in whatever feature you want to show.
• Pacing is ~13s across both scenes. For a strict 10s: trim one beat or speed the typing (speed arg in typeInto, and the sleep() holds in sceneA/sceneB).
• The stage is a fixed 1280×720 so screen-capture / headless capture gives clean frames.

Export to MP4 / GIF

• Quick: QuickTime → New Screen Recording → crop to the 1280×720 stage → capture one loop (~13s).
• Crisp/automated: headless-Chrome frame capture → stitch to MP4/GIF.

Tie-in

Mirrors src/pages/code/ in the UseThinkPool/thinkpool repo. When the marketing program formalizes, this can move into / be referenced from thinkpool/marketing/.