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]