# Spoolcast — interactive product mockup

A clickable frontend mockup of the Spoolcast AI video pipeline — login → onboarding → project picker → the step-by-step workflow → a Library "flow" canvas. No backend; everything is mocked from real session data.

Type: project

Published: 2026-06-02

[Original page](<https://artlu.ai/project/spoolcast-interactive-product-mockup>)

[Browse this group](<https://artlu.ai/ai/groups/spoolcast.md>)

Parent project: spoolcast

Series: features

Recorded status: launched

Updated: 2026-09-16T16:22:36.853Z

Technologies: React, Vite, TypeScript, React Router, CSS, Cloudflare Pages, ffmpeg, Claude

## Details

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.

## Links

[Site or demo](<https://spoolcast-web.pages.dev/>)

## Related build notes

[the spoolcast pipeline as a clickable front end](<https://artlu.ai/ai/log/day-77-the-spoolcast-pipeline-as-a-clickable-front-end.md>)


Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material.

[Directory](<https://artlu.ai/llms.txt>)