Hero Image Loader

Hero Image Loader — Framer Component

Most preloaders end. This one hands over.

A big number counts to a hundred while your pictures change behind it. The images are indexed off the count rather than off a timer, so with four pictures the swaps land exactly as it crosses 25, 50 and 75 — the number and the picture read as one mechanism instead of two things happening near each other.

At a hundred the counter drops away and the last picture grows into your hero image's exact place: same position, same size, same crop. The real image takes over and the loading screen slides away behind it. Nothing is revealed, because nothing was hiding.

Loader and hero do not have to be the same shape. The box itself animates its position, size and corner radius, so a tall portrait loader can land as a wide hero and the crop changes on the way.

Setting it up is one rename. Drop the component at the root of your page, name your hero image layer to match the Hero Image Layer control, and add your pictures. If that layer is ever missing, the loader fades out instead of breaking the page.

What's inside:

* The handoff — the last picture becomes your real hero image

* A sequence timed to the count, not to a stopwatch

* Any shapes — the box morphs, so the crop follows

* A big tabular counter, sized to the screen, plus a corner tag line

* 3 openings, 2 exits

* Load time and flight time set independently

* Shows once per visit

* Respects prefers-reduced-motion

* 20 controls, no external libraries

Licence: one price, unlimited websites, including client work.