# 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.

Block · With a Pass · https://tactileui.dev/blocks/shutter-preloader

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **Idle**: Shut, waiting until the section is a third in view.
2. **Loading**: 
3. **Revealing**: 
4. **Open**: The page is live: nav, reel button, links; the Iris is asleep and nothing runs.
5. **Page transition**: Work, 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.
6. **Replay**: The replay control closes the shutter and runs the loading intro again.
7. **Tablet**: A taller hero; the text sits at the bottom over a bottom wash; the coast recomposed for the frame.
8. **Phone**: The nav wraps with its links on their own row, replay becomes an icon button, the actions stack full width.
9. **Reduced motion**: No loader and no shutter: the page is there at once, nav links change the page instantly, and the replay control is hidden.
10. **Off screen**: Loading waits until the section is in view.

## 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.