Shutter Preloader

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.

Copy the shutter-preloader folder and the iris folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="iris/iris.css">
<link rel="stylesheet" href="shutter-preloader/shutter-preloader.css">
<div id="shutter-preloader"></div>

<script type="module">
  import Iris from './iris/iris.mjs';
  import { mount } from './shutter-preloader/shutter-preloader.mjs';

  const shutterPreloader = mount(document.getElementById('shutter-preloader'), {
    studio: 'Ostra',
    headline: 'Light, held still.',
    sub: 'A film and photography studio on the Lisbon waterfront. Commercials, documentaries and stills for people who make things by hand.',
  }, { Iris });

  // shutterPreloader.update({ … });   change any option in place
  // shutterPreloader.destroy();        and take it away again
</script>

mount(element, options, { Iris })

Builds the block inside the element and returns its handle. Hand it the Iris it is built with.

handle.phase

handle.page

handle.replay()

Run the intro again: shut, load, open.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. IdleShut, waiting until the section is a third in view.
2. 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.
3. RevealingAt 100 the shutter opens slowly on a soft spring; the kicker, headline, copy and actions rise 26px and fade in, staggered.
4. OpenThe page is live: nav, reel button, links; the Iris is asleep and nothing runs.
5. 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.
6. ReplayThe replay control closes the shutter and runs the loading intro again.
7. TabletA taller hero; the text sits at the bottom over a bottom wash; the coast recomposed for the frame.
8. PhoneThe nav wraps with its links on their own row, replay becomes an icon button, the actions stack full width.
9. Reduced motionNo loader and no shutter: the page is there at once, nav links change the page instantly, and the replay control is hidden.
10. Off screenLoading waits until the section is in view; the counter is the block's only loop and stops at 100.

Made of: 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.

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.

• 05IrisA lens’s iris diaphragm, as a reveal.

More blocks on the same object:

• 05.1Portfolio IrisA photographer’s index where every frame is a shutter.
• 05.2Camera LaunchA launch hero for a fast prime, where the lens is the Iris.