Title: Loader Cinema — Twelve Openings
Prompt: Run a tiny picture-house showing twelve hand-built CSS loaders on a sprocket-holed screen with grain and a progress bar. Keep the voice of a projectionist — reel leaders, intermissions, a countdown and a finale. One tempo control should rule every animation.
Design: A black cinema screen framed by film sprockets and grain beside a twelve-button reel picker and three booth cards for tempo, tint and countdown; red curtain and gold marquee accents on near-black.
Visual techniques:
- Twelve pure-CSS loaders from spin ring and EQ bars to clapper, curtain and triple orbit
- Sprocket rails, grain overlay and progress hairline for theater texture
- Caret blink, clap, equalizer and scale-rotate keyframes
- Live countdown numeral and typewriter credits driven by one JS clock
- Tint filter presets and dashed ticket artifact
Interaction model: Reel buttons and arrow keys switch among twelve loaders, tempo slider rescales playback, tint slider regrades the projector, countdown slider sets the leader start, play pauses all animations, grain and bar toggles dress the screen, and random jumps to a surprise reel.