Apple-style launch film, built in code

Every pixel of the Mac is drawn in code: the menu bar, the notch, the widgets and the wallpapers. One HTML file with window.seek(seconds), exported to MP4.

Before you start: read brand.md and MOTION.md if they exist. If not, run brand-intake first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

Pairs with a free skill (not mine) that turns Apple's design guidelines into rules Claude follows. Install it once:

npx skills add emilkowalski/skills --skill apple-design

Step 1: Ask for five things, then wait

1. The product name and its one line, word for word.
2. The facts list. Every feature, number and requirement the film may show. Nothing else goes on screen.
3. The scenes. 6 to 8, each one feature plus one short caption. Example: "Your voice lives here."
4. A reference (optional): a real Mac launch film or frames of one, in a folder called ref. It sets the look only.
5. Size and length. Default 1920 x 1080, 30fps, about 2.5 seconds a scene.

Step 2: Build brief (paste into Claude Code)

Use the apple-design skill. [If ref/ exists: Match the LOOK of the reference in ref/. Read every frame first. Do not copy its words or its product name.]

It is a launch film for [PRODUCT]: the black MacBook notch at the top centre grows into Apple-style widgets, one scene at a time. Each scene has its own full-screen colour-gradient wallpaper and one centred caption below the notch, with the last word or two tinted a lighter shade of the wallpaper colour. It opens with the notch expanded and the word "hello" handwritten in a white script line, like the Mac hello screen.

Use only these facts, and add no others:
[FACTS LIST]

Scenes, about 2.5 seconds each:
[1. Notch expanded on black, "hello" handwritten.]
[2..n. Wallpaper colour, what the notch opens into, the caption.]
[Last. Black: the notch closes to its resting shape. Caption: PRODUCT and its one line.]

Size [WIDTH] x [HEIGHT], 30fps. The frame is a Mac screen: a thin macOS menu bar across the top with the notch in the middle of it. System fonts (-apple-system, Helvetica Neue fallback).

Build it as one self-contained HTML file with window.seek(seconds) that draws any exact frame. Capture one frame from each scene [and compare it side by side with the matching reference frame]. Fix what differs, and check the motion against the apple-design skill.

What I learned the hard way

• Name the notch in words. Given the same brief, one model drew a whole laptop instead. "The notch at the top centre of the screen" is the anchor.
• Springs, not tweens. The notch looks right when width and height spring on their own curves, open soft and close without overshoot.
• Work motion out from the start of the film. If the notch reopens before it has finished closing, it carries on from where it is. A per-scene tween jumps.
• Compare against the reference, scene by scene. Side-by-side frames caught a "hello" that sat off-centre and too big, a chunky progress bar that should be thin ticks, and a prompt jammed into the menu bar.
• Keep the menu bar short. A full menu of words gets cut in half by wide widgets. Five items is plenty.
• Widgets add no claims. Placeholder text is grey lines. Any UI word the facts list did not give you (button labels, a clock time) gets listed back for approval.

Step 3: Check and export

Would a stranger believe it is a real Mac for the first second? Is every word on screen from the facts list? Add a reduced-motion setting that swaps springs for quick fades.

Export with HyperFrames (free, open source): npx skills add heygen-com/hyperframes, then npx hyperframes render. For a vertical cut, hand the MP4 to reel-export.