Scroll Cinema

Scroll Cinema (universal)

One skill, four visual lanes. The scroll mechanic is always the same — scroll drives a timeline/camera, no cuts — but the renderer is chosen by fidelity and budget. This skill picks the lane, wires the engine, and for the paid photoreal lane hands off to the specialist skill rather than duplicating it.

Design principle: take the best of each technique, reimplement none. The free lanes share one code engine; the photoreal-video lane is the scroll-world skill's job.

Step 1 — Interview

Ask, in plain prose (not fabricated multiple-choice for the open ones):

• Subject/brand + one-line pitch, brand kit (4-6 hex, name, tone).
• Beats — 3 to 6 ordered scenes, each with headline + role in the story.
• Fidelity + budget — this picks the lane (Step 2). State the cost of the paid lane before choosing it.
• Target framework (Next.js/React assumed; the engine is framework-agnostic).

Step 2 — Route to a lane

Default to lane 1. Escalate only on explicit need. Only reach lane 4 when the user wants AI-generated photoreal video AND accepts per-clip spend.

Step 3 — Build the chosen lane

Lanes 1-3 (free, code): wire assets/scroll-engine.js (Lenis + GSAP ScrollTrigger). It pins the stage, builds one scrubbed timeline across the beats, and emits progress (0..1) per scene that the visual layer reads. Layer specifics + code: references/visual-layers.md. Next.js/React integration (hook, SSR, cleanup): references/react-nextjs.md.

Lane 4 (paid, photoreal video): do NOT reimplement the render pipeline. Invoke the scroll-world skill — it interviews for art direction/camera, generates the scene stills, the dive-in clips, and the frame-locked connector clips (Higgsfield stills + Monid/Seedance video, or Higgsfield-credits fallback), and ships its own vanilla scrub engine that plays the chain as one flight. This skill's role in lane 4 is only to route there and, if the page also needs code-driven sections, to run them on the same page alongside scroll-world's video hero. scroll-world owns the seams, the cost gate, and the video engine; trust it, don't fork it.

Step 4 — Performance & accessibility (all lanes, non-negotiable)

• Honor prefers-reduced-motion: no smooth-scroll, no scrub; show scenes static.
• Headlines are real DOM text (SEO + screen readers), never baked into image/video only.
• Lazy-load heavy layers (Three/Spline/video) below the fold; never block first paint.
• 3D: cap devicePixelRatio, pause the loop when the stage is offscreen.
• Video (lane 4): scroll-world already hardens phones (seek-coalescing, iOS priming); keep it.

Step 5 — Render and eyeball

Open the page; scroll slow and fast; check a narrow viewport. Watch for jank, layout shift, wrong scene overlap, and (lane 4) any seam "pop".

Non-negotiables

• Free by default. Lane 4's per-clip cost is opt-in, stated before spend.
• One engine, swappable visuals for the code lanes; the renderer only consumes progress.
• Delegate, don't duplicate. Photoreal video = the scroll-world skill. This skill never re-creates the Higgsfield/Monid pipeline.
• Reduced-motion is a real branch. Text is DOM text.

Files