ParthJadhav/apple-like-demo

Apple-like product demo video

The target is an apple.com product page that moves: light ground, big tight-tracked SF Pro, one message on screen at a time, full-bleed colour cards, the product's real UI, real SF Symbols, real app icons, an upbeat composed track, and a plain call to value at the end. Built as a Diffusion Studio JSX composition so every frame is deterministic and can be checked before export.

Start from templates/promo-project/ next to this file (a complete, working composition: a Mac lock-screen utility's launch film). Read its BRIEF.md and POSITIONING.md to see the finished shape.

Working style

• Feedback arrives as terse bullets, often with screenshots of the frames meant. Do all of them; verify each by capture; export; reply with a frame contact sheet.
• When asked to brainstorm, list 3–4 options in one line each, then build the best one without waiting.
• Keep BRIEF.md (beat table with times and copy) and POSITIONING.md (copy rationale with sources) current on every round.
• Never fabricate proof: no invented user counts, quotes or logos. Real screenshots, real copy strings from the product's source, real icons.
• Report faithfully: say what was verified by capture and what was not.

Structure

One message per card, hard cuts either side, a demo shot on the product between cards where one exists. Cuts land on the music's beat grid.

1. Hook, 3 s to stop the scroll — the viewer's problem, product in action, no logo. One card per use case: one window + one line, the pair centred as a group mid-frame. Cover every use case the website lists, not just the lead persona ("Your agent needs three more hours." / "Your render needs forty minutes." / "Your build is halfway." / "You need to leave.").
2. Problem — a text-only card, the bad alternatives stacking mid-frame, the cost in red ("Lock it? The Mac sleeps.").
3. Reveal — icon pops on a music hit, wordmark, the website's own hero line (message match with the landing page).
4. "Made for" grid — the site's use cases as 4 tiles: coloured circle with an SF Symbol, title, real app icons under it. No sub-text.
5. Demo — the real UI doing the one thing, captions just under the action, key words highlighted.
6. Feature cards — benefit as the headline, feature as the sub. Blue / slate-grain / green / black-with-gradient-text / page-grey. Show, don't tell: a clock rolling through the night, key caps stamped "✕ Blocked" in red, notices arriving on the lock screen.
7. Outcome — come back to finished work, every job done.
8. More features grid — 4 tiles, one short line each.
9. Trust — "No cloud. No tracking. No subscription."
10. Sign-off — icon + name, "Try it free for 7 days.", "Then $8.99, once.", the URL. Nothing else.

Length about 45 s. Hook cards ≈ 1.3 s, text cards ≈ 2 s, demos 1.6–2.8 s, grids ≈ 3.4 s, sign-off ≈ 7 s. Fast paced, but every screen stays long enough to read.

Look

Tokens in references/design.md. In short:

• Page ground #f5f5f7, text #1d1d1f, secondary #6e6e73, accent = the product's blue, system red #ff3b30 for costs and the Touch ID glyph, system green for success. Light mode only.
• SF Pro via -apple-system; headlines 76–120 px, weight 600–700, letter-spacing −0.03 to −0.04 em; SF Pro Rounded for clocks.
• Full-bleed gradient cards (blue, green, slate with SVG grain, black with gradient-clipped mono text) in the spirit of apple.com product pages.
• Liquid Glass surfaces: translucent white, lit rim, capsule shapes, wide soft shadow, backdrop blur. Product UI rebuilt from its own source with the same sizes, weights and copy.
• Real SF Symbols rendered from macOS (tools/render-symbols.swift); real app icons extracted from installed apps. Highlight words with **…** through Rich.tsx.
• Text is centred; a window and its line move as one centred group. Never change text at the bottom while something animates at the top; put captions next to the action and delay other motion until the line has landed.

Copy

Principles with sources in references/copy.md. Rules:

• Simple words, short lines, no sub-text unless it carries a fact.
• Headline fully descriptive of what the product does; reuse the site's.
• Specific numbers ("three more hours", "340 tests", "2:06 AM").
• Benefit first, feature as proof; handle the objections that stop a buyer (privacy, lock-out, price, "does it fit my case").
• CTA is a call to value with the price beside it.

Audio

Compose the bed in code (tools/make-music.py, numpy + ffmpeg): 126 BPM, kick every beat and clap on 2/4 from bar one, pluck arpeggio, sub, pad; riser + impact into the reveal and the lock; breakdown at the unlock; resolve under the sign-off; a soft tick on every card cut. Moments are parameters at the top of the script; retune them whenever the cut changes. Use the product's real system sounds where it has them. No licensed music.

Workflow

1. Read the product's site and source for use cases, copy strings, UI captures, icons. Read references/copy.md.
2. Write BRIEF.md and POSITIONING.md.
3. Copy templates/promo-project/; set ROOT in src/theme.ts.
4. Build the timeline first (src/timeline.ts: moments, copy, tweens), then cards, then demos. Regenerate the music to the moments.
5. Verify: dapi check, then dapi capture contact sheets of every beat; read them; fix; only then dapi export. Probe the MP4 (duration, audio peak) and tile sample frames for the reply.
6. Pipeline details and rasterizer gotchas: references/pipeline.md.