Design reference 95 · Avant-garde & experimental
Frame by Frame
A film’s timeline can become the publication’s reading surface.
Download design ZIP · Open interactive specimen
Design specification
Idea. A film’s timeline can become the publication’s reading surface.
Composition. Black film stock, sprocket holes and an unbroken horizontal contact strip carry original night-window illustrations. Huge frame numbers locate annotations precisely in time.
Navigation and complete example. Scrub an original 72-frame vector vignette, select one of six annotated moments, compare the storyboard with the finished scene and read its production notes.
Responsive and inclusive behaviour. The film strip is a contained horizontal scroller. A labelled range, previous/next frame buttons and six chapter links provide complete navigation. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.
Adaptation. Attach information to meaningful temporal moments. Use a finite timeline and make motion pausable; do not require playback to access annotations. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.
Research. [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.
Files for a coding model
Reference images
- Desktop — 1440 × 1000 viewport
- Phone — 390 × 844 viewport
- Supporting state — 1440 × 1000 viewport
- Full page — 1440 × 1000 viewport
Supporting routes
Reuse
Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.