🛠️ Workflow — steps 5 to 7

5. Slice + compress frames (ffmpeg)

• scripts/extract-frames.sh <clip.mp4> frames/<nome> 180 → ~179 numbered JPGs.
• scripts/compress-frames.sh frames/<nome> 1600 88 → 1600px wide, q88 (sharp, <~15MB/section).
• One folder per clip (e.g., frames/spin, frames/explode).

6. Build the site from templates/

• Copy templates/index.html, styles.css e scroll-cinematic.js for the project.
• Edit the configuration SCRUB_SECTIONS (bottom of index.html) — one entry per clip:

{ section:"#hero", frameCount:179, bg:"#0a0a12", framePath:(i)=>\frames/spin/frame_${String(i).padStart(4,"0")}.jpg\ }.

• Write the brand copy, palette (CSS variables), benefits/color variants/features sections, stats, and CTA.
• Hue-shifting technique for product/color variants (no extra generation):

ffmpeg -i base.png -vf "hue=h=120:s=1.15" variant.png.

7. Run on localhost

• Copy templates/Launch Demo.command for the project, edit PORT + name, run chmod +x.
• Start (python3 -m http.server <port>), use curl on the page and in a frame to confirm status 200, open the URL.
• Tell the user the URL and that double-clicking the .command restarts the server for recording.