3D title sequence, built in code

The first 3 seconds decide whether anyone watches. This skill builds a short cinematic opener: a camera moving through a lit 3D scene, ending on your question or title.

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.

Step 1: Ask for four things, then wait

1. The line that lands at the end. Example: "Why does every brand logo look the same now?"
2. The world. One setting that fits the story: a night street, an empty office, a desk at 5am, a stage. Default: rainy street at night.
3. The objects in it. Real names or logos as signs, screens or posters. Logo files attached, never redrawn from memory.
4. Brand and size. One accent colour for the key word. 1920 x 1080 or 1080 x 1920.

Review rules (from the rounds that got rejected)

• Sound is not optional. A silent explainer feels unfinished. Write a score in code: a low bed, a hit on each new shot, a lift on the last line.
• Cards and images, not lines. A single bar or line moving across the screen reads as static. Every shot uses cards, real images or objects that move in depth.
• Logos fill their card and come from the real files. A logo floating small in a big box looks wrong.
• Keep grids symmetrical. Equal card sizes, equal gaps. A lopsided layout reads as a mistake.
• Stunning or it's not done. If the first 3 seconds would not stop your own thumb, rebuild them before building the rest.

Step 2: Build brief (paste into Claude Code)

Build one self-contained HTML file called index.html: a [SECONDS]-second cinematic 3D title sequence at [WIDTH] x [HEIGHT], using Three.js from a pinned version and only the files I attached.