# 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.

- Page: https://meetreference.com/v/kinetic-type-title-card-coffee-shop/
- Exact prompt as plain text: https://meetreference.com/v/kinetic-type-title-card-coffee-shop/prompt.txt
- Made with: Claude.ai
- Model: Claude Opus 5.5
- Built with: Plain JavaScript
- Style: Kinetic type; title card, kinetic typography, minimal, dark, serif, html canvas
- Length and format: 10 sec, 16:9 (1280x720 source)
- Shared by Iron Forge Apps in YouTube, Oct 4, 2026: https://www.youtube.com/watch?v=vSz55Vj6KF4
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. Work in Claude.ai with Claude Opus 5.5, or the closest equivalent you have.
2. Set up what the prompt expects: A screen recorder, or a tool such as Playwright, to turn the HTML animation into a video file.
3. Follow the prompts below in order. It is the creator's text, unedited.
4. To adapt it to a new subject or look: 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.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompts

### 1. Starter prompt

```text
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.
```

### 2. Fix-it message

```text
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.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

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.

Storyboard, nine frames spread across the video: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/storyboard.webp

- Frame 1 at 245.0s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f1.webp
- Frame 2 at 246.1s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f2.webp
- Frame 3 at 247.2s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f3.webp
- Frame 4 at 248.3s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f4.webp
- Frame 5 at 249.4s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f5.webp
- Frame 6 at 250.4s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f6.webp
- Frame 7 at 251.5s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f7.webp
- Frame 8 at 252.6s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f8.webp
- Frame 9 at 253.7s: https://meetreference.com/media/kinetic-type-title-card-coffee-shop/f9.webp

## How it was made, per the creator

- One-shot: no
- Notes: 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.

> One sentence got me something pretty that wasn't mine: Claude invented the tagline, an emblem and the timing.
> (Iron Forge Apps)

## Links

- Watch: https://www.youtube.com/watch?v=vSz55Vj6KF4&t=244s
- Original post: https://www.youtube.com/watch?v=vSz55Vj6KF4