Elegant Preloader

Most preloaders are a spinner and a fade. Aperture is a short film.

The screen goes dark, a counter runs up to 100, a thin slit of light cuts across, four film frames flash through, and then the aperture opens on your hero image. It takes about five seconds and lands on a finished hero with the nav, headline, buttons and footer already in place. No flicker at the handoff, no layout jump.

It's one component. Drop it on your page, swap the photo, type your own copy. You can make it look like your brand in about ten minutes, and you never have to open the code.

What you get

• Preloader and hero in a single component, so the handoff is actually smooth

• Separate layouts for phone, tablet and desktop, with a full-screen menu on smaller screens

• Liquid hover buttons (CSS only, and no hover effect on touch devices)

• Live local time next to your brand, set to your own city and time zone

• Every word of the opening is editable, and you can pin the canvas to any beat: Void, Light slit, Film gate, Aperture or Hero

• Film grain, ambient loops and a rotating reel badge you can switch on or off

• Respects reduced motion