Guide route
How Filmstrip was built.
This variation treats the homepage as a linear narrative played back through scroll. Each section is a scene. Evidence labels function as director's commentary. The timeline scrubber provides narrative control.
Brief
Build JD Workshop variation 17 as a distinct cinematic static site. Use 2.39:1 strips, letterbox presentation, and a film-grade color grade. Proof labels should function as director's commentary. Include a timeline scrub interaction.
Do not repeat prior sites. Make scroll feel like playback. Keep evidence honest.
Evidence labels
Working code, real implementation details, verification commands, and the filmstrip structure itself.
Speculative expansions, future features, and hypothetical use cases that are explicitly labeled.
Interactive pieces with limited scope intended to be inspectable rather than production-ready, such as the timeline scrubber.
Technical stack
- Static HTML/CSS/JS pilot
- Vanilla JS for timeline scrubber and scroll playback
- Canvas 2D for film grain overlay
- CSS transforms for scene transitions
- No external runtime dependencies
- Reduced-motion support: disables grain animation and substitution transforms
Implementation choices
- The filmstrip format is self-contained: each scene has its own visual, proof labels, and director's commentary.
- The timeline scrubber connects scroll position to playback state, giving users narrative control.
- Film grain is an additive surface, never blocking content.
- No invented evidence is presented as fact.
Critique passes
- Pass 1: Distinct from prior variations through cinematic presentation, filmstrip format, timeline scrubber, and letterbox layout.
- Pass 2: Verify reduced-motion behavior, distinct proof labels, working guide route, internal link integrity, and responsive layout.
- Pass 3: Static verification across home and guide routes with one H1 each; responsive browser behavior checked at desktop and mobile widths.