build-mockup-film

Mockup film

The product-y cousin of photofilm. Same self-contained HTML player + audio-driven scene cues + Ken Burns + crossfade transitions + CC + fullscreen. Difference: scenes are CSS/HTML-rendered UI mockups instead of photos.

For the underlying player rules (CC defaults to ON, fullscreen mandatory, audio-first production, split-layout), see photofilm skill — every rule applies here too.

---

HARD RULE — Every video must have a browser-playable HTML version

Every mockup film, photofilm, and Remotion video must have a self-contained HTML player that works by opening a single .html file in a browser. No npm, no build step, no terminal commands. This is non-negotiable because:

• Clients and stakeholders won't run npm start
• The HTML version deploys to Vercel/any static host automatically
• It works offline, on any device, with zero setup

For mockup films and photofilms, the HTML player IS the primary deliverable — this rule is already satisfied.

For Remotion projects, you must ALSO create an HTML player. Two options:

1. Render the Remotion project to MP4 (npm run build), then embed the MP4 in a simple HTML page with <video> tag, controls, and poster image
2. Build a parallel HTML mockup film that covers the same content (simpler animations, but fully functional)

The Remotion version is for high-quality MP4 export and frame-precise editing. The HTML version is for deployment, sharing, and embedding. Both must exist.

---

When to use mockup-film vs photofilm

Use mockup-film when	Use photofilm when
Demo a product / UI	Tell a story
Show code, terminals, dashboards	Show people, places, objects
Content is text + numbers	Content is visual
Each scene has named UI elements (input fields, buttons, lists)	Each scene has a mood/setting

---

CSS-rendered mockups beat screenshots

For anything representable in text (code, prompts, terminal output, JSON, SQL, UI text):

• Responsive
• Accessible (real text, screen-reader friendly)
• Resolution-independent
• Easy to update — no re-screenshot when copy changes
• Brand-controlled — palette matches deliverable

Build mockups as HTML+CSS components:

• Terminal window: three colored dots (red/yellow/green) + window-title bar + monospace content area
• Browser frame: tab bar + URL field + back/forward/refresh icons + content viewport
• Code editor: line-number gutter + syntax-highlighted content + file tab
• Device frame: phone bezel + status bar + content area + home indicator
• Dashboard tile: card with stat number + label + sparkline + delta arrow

Reuse mockup components across the film via <iframe> to standalone HTML files (isolates styles from host page; per websites skill).

---

Scene cues = same as photofilm

Audio drives scene transitions via Scribe v2 word timestamps. Generate ElevenLabs narration + Scribe BEFORE building player. Anchor scene boundaries to actual word starts (240ms / 6-frame pre-roll).

---

Output structure

projects/<project>/<mockup-film-name>/
├── brief.md
├── script.md                  # with operative-word audit table
├── narration.mp3              # or per-beat MP3s
├── timestamps.json            # Scribe v2 word-level
├── mockups/
│   ├── 01-terminal-init.html     # standalone mockup HTML, iframe-embeddable
│   ├── 02-browser-localhost.html
│   ├── 03-code-editor.html
│   └── ...
├── mockup-film.html           # the self-contained player
├── thumb.jpg
└── LOG.md

---

Orchestratum-tier additions

Per photofilm skill plus:

• Cross-dissolve transitions (never flat-color rest beats)
• 15-20 beats minimum
• Audio-anchored reveal frames

---

Pairs with

• photofilm — same player rules + sequence
• elevenlabs-tts — narration + Scribe
• image-generation — when mockups need a generated logo / chart
• qa-mockup-film — verifies CC + fullscreen + audio sync + mockup responsiveness
• websites — coded visual mockups count as visual elements; iframe-embed each