video showcase + per-video guidebook pages — artlu.ai
new homepage section listing shipped spoolcast videos; each card opens a "how it was made" guidebook with scene prompts, style library, narration beats, and audit results.
What is the video showcase?
A new section on artlu.ai that turns every shipped spoolcast video into a learning artifact — not just media. Each card links to a full behind-the-scenes guidebook page.
What it does
- Homepage: a responsive grid of video cards (4×2 desktop, phone-shaped stack on mobile) that grows by row as more videos ship, capped at 2 rows.
- /video/:id detail page: YouTube embed, core message, style library (anchor + reference characters/objects with full prompt on hover), a summary row naming the tools used (writing, images, audio, render, narration audit), every chunk with its scene image + narration beats + exact generation prompt + audit badges, and a transcript structured by scene instead of a single blob.
How it works
A node sync script (scripts/sync-video.mjs) reads a sibling spoolcast-content repo — session.json, shot-list.json, scene manifests, audit files, style library — and emits a "database-shaped" bundle.json per video into public/videos/<id>/. No filesystem paths in the output, just public URLs, so a future spoolcast DB can emit the same contract. Raster assets get downscaled via cwebp at 640px q72 — ~1MB per video instead of ~80MB. Shipping a new video is one manifest entry + one command + a git push.
Built with
React + Vite (frontend), Node 22 sync script with no npm deps, cwebp for thumbnails, YouTube embeds, reads from spoolcast-content as a sibling repo.