Build a 10-second motion graphic as ONE self-contained HTML file (no libraries, no external files or fonts). WHAT IT IS An animated title card for Harbor Coffee, a small neighbourhood coffee shop. Words on screen: "Harbor Coffee" and the line "Roasted two streets from the water." FORMAT - A 1920×1080 canvas, scaled to fit the window. - One function, render(t), draws the whole frame for any time t in seconds. Nothing may depend on the previous frame. - A play/pause button and a scrubber so I can drag to any moment. Loop at the end. SHOT LIST (10 seconds) 0.0–1.5 A thin line draws across the middle, left to right. 1.0–3.0 "Harbor Coffee" rises into place above the line, one letter after another. 3.0–4.5 The tagline fades up below the line. 4.5–8.0 Hold. A slow wisp of steam drifts up behind the name. 8.0–10.0 Everything fades out except the line, which retracts to the left. LOOK - Two typefaces only: a bold sans for the name, an italic serif for the tagline (system fonts). - Colours: background hex 0e0c0a, text hex efe7dc, one accent hex d98e4a. No other colours. - Generous margins. Nothing closer than 120 px to an edge. MOTION RULES - Never linear. Ease out for things arriving, ease in for things leaving. - Stagger the letters by 40 ms. Nothing pops in. - One thing moves at a time. When it lands, it stays still. Before the code, repeat the shot list back to me with the exact timings you will use.
Screenshot attached: this is the frame at 6.0 seconds. Two changes, nothing else. 1. From 4.5 to 8.0 s the steam is too faint and too small to notice. Make it about three times taller and twice as bright, rising from above the "o" in Coffee. 2. The name feels small in the frame. Make "Harbor Coffee" about 30% larger and keep everything centred. Keep every timing the same.
Make it yours. Change the words under "WHAT IT IS", the timings under "SHOT LIST (10 seconds)" and the three colors under "LOOK". Keep "One function, render(t)" and the "MOTION RULES" block so every frame can be scrubbed and checked.
Animated title card for a coffee shop
A 10-second title card for a neighbourhood coffee shop, with a drawn line, the name rising letter by letter, a serif tagline and a wisp of steam. Claude Opus 5.5 built it as one HTML file from a prompt with a timed shot list, three colors and motion rules.
“One sentence got me something pretty that wasn't mine: Claude invented the tagline, an emblem and the timing.”
You'll need
- A screen recorder, or a tool such as Playwright, to turn the HTML animation into a video file
How it was made
Generated in the Claude app on 2 October 2026, one run per prompt, and shown unedited. The segment here is the first try from the starter prompt. The fix-it message, sent with a screenshot of the frame at 6.0 seconds, made the steam larger and the name about 30% bigger; the video shows that version later, side by side with the first. The animation runs as an HTML page with a play button and a scrubber and was screen-captured in Chrome, since there is no video export and no sound. As published, the colors read "hex 0e0c0a" and so on because the description drops the hash sign; the creator says to put a hash sign before each hex code.
Posted Oct 4, 2026 · YouTube · 52 views
Prompt from: YouTube description
Look notesby Reference
A dark, minimal title card: a thin copper line across the middle of a near-black frame, "Harbor Coffee" set just above it, the tagline "Roasted two streets from the water." below, and a faint wisp of steam rising above the name.
- Color
- Near-black espresso, warm off-white type and a single copper accent for the line, the three colors the prompt allows.
- Type
- A bold sans-serif for the name and a small italic serif for the tagline, both centered. A tiny label from the tutorial sits in the lower left corner.
- Framing
- Everything sits on the horizontal center line with wide empty margins; the name rests on the line and the tagline hangs just below it.
- Structure
- The line alone, the name partly risen, the full name, the tagline added, the steam appearing and growing above the "o", the type dimmed, then the line alone again.
