Shutter Preloader
A studio landing page that loads behind a shutter. The Iris breathes over the hero while a counter runs on its blades, then opens as the headline rises; every nav link closes it again.
Built with Iris
What it is for
A finished preloader, hero and page transition in one for a studio or portfolio site: the object does the loading state, the reveal and the navigation, so the site feels like one camera.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Iris as preloader, Breathe then reveal, Shutter page transition, Phase machine from object state, Inert while shut, Eased load counter, Per mood painted scene, Wash from one table
- Stack
- Vanilla ES modules, CSS, WebGL, Canvas 2D
- Needs
- Iris
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- IdleShut, waiting until the section is a third in view.
- LoadingThe shutter breathes (pinhole to a small window, the page glimmering through) while the counter runs 0 → 100 over 2.4 s on an ease-out curve with a bar along the bottom; the page is inert and aria-busy.
- RevealingAt 100 the shutter opens slowly on a soft spring; the kicker, headline, copy and actions rise 26px and fade in, staggered.
- OpenThe page is live: nav, reel button, links; the Iris is asleep and nothing runs.
- Page transitionWork, Studio or Contact closes the shutter, swaps the headline and copy, repaints the coast at that page's hour (dawn, haze, night), shows the page name on the blades, opens again and moves focus to the new heading.
- ReplayThe replay control closes the shutter and runs the loading intro again.
- TabletA taller hero; the text sits at the bottom over a bottom wash; the coast recomposed for the frame.
- PhoneThe nav wraps with its links on their own row, replay becomes an icon button, the actions stack full width.
- Reduced motionNo loader and no shutter: the page is there at once, nav links change the page instantly, and the replay control is hidden.
- Off screenLoading waits until the section is in view; the counter is the block's only loop and stops at 100.
Notes
Ships with a painted coast in four moods, a two-face type system, status announcements and focus handling.
Original composition; the studio (Ostra), its pages and all copy are invented. The coast is a canvas painting made in shutter-preloader.mjs for four moods: no image ships. Faces: Boldonse and JetBrains Mono (SIL OFL 1.1), full fonts converted to WOFF2.
Anatomy
Iris as preloader, Breathe then reveal, Shutter page transition, Phase machine from object state, Inert while shut, Eased load counter, Per mood painted scene, Wash from one table
Usage notes
A finished preloader, hero and page transition in one for a studio or portfolio site: the object does the loading state, the reveal and the navigation, so the site feels like one camera. Ships with a painted coast in four moods, a two-face type system, status announcements and focus handling.
Options
| Option | Type | Description |
|---|---|---|
| studio | text | The wordmark, set in the display face. |
| headline | text | Headline |
| sub | text | Introduction |
| mood | enum | The hour the coast is painted at on the first page. |
| hold | number | How long the counter runs before the shutter opens. |
| finish | enum | Shutter blades |
| blades | number | Blade count |
| light | number | The blades’ lamp: 0 from above, clockwise. |
| reel | text | Reel length |
Methods
- phase
- page
- replay
- update
- destroy
How it works
Original composition; the studio (Ostra), its pages and all copy are invented. The coast is a canvas painting made in shutter-preloader.mjs for four moods: no image ships.