Spoolcast — interactive product mockup

A frontend-only design mockup of the entire Spoolcast product, built to show how the AI video pipeline would feel as a real app — not a working tool. It walks the full shell: a login screen, a first-run onboarding flow, a projects picker with in-progress resume cards, the step-by-step generation workflow (with Cast as a first-class step), and a Library.

The Library is the centerpiece: a "flow" canvas that traces every reusable asset along its real lineage — Template → Project → Session → Assets — with bezier connectors between the columns. It uses progressive disclosure (only the Template column is filled on landing; each pick reveals the next), an infinite-scroll canvas, and a masonry grid where every thumbnail renders at its asset's true aspect ratio. The structure and content are mapped to the actual spoolcast-content repo layout — real scene art, characters, renders, and prompt text from existing sessions — rather than invented placeholders.

How it's made: React 19 + Vite + TypeScript + React Router, a single CSS-custom-property design system, fully responsive. No backend — auth, generation, and data are all mocked locally. Deployed on Cloudflare Pages via git-connected auto-build; the real content assets are mirrored into the build and the two oversized demo videos were transcoded under Cloudflare's 25 MB/file limit. The landing page carries an "Interactive mockup" banner so visitors know nothing here is live.