Hero Image Loader — Framer code component

Shop — Classes — Studio

Framer code component

The loader turns out to be the page

A big number counts to a hundred while your hero image opens and settles. At a hundred it grows straight into its place in the hero, so the wait was the page arriving.

Image becomes the hero

Big count

Any shape

Shown once a visit

Close-up of the speckled glaze inside a finished stoneware bowl

The loader

Reload this page to watch it

The card below is the loader frozen part way through its count. On the live page it covers the viewport, then the image lands in the hero above.

The sequence runs while it counts, then stops on the last shot — which is your hero image

Properties

Everything is a property

Twenty-one controls. Point it at your hero image layer, drop your images in, and set the pace.

The handoff

The loader image grows into your hero image's exact place, then hands over to the real one.

Same picture

Use your hero image as the loader image, so the visitor is already looking at the page.

The count

A big tabular number to a hundred, sized as a share of the screen, that drops away at the end.

The opening

The image wipes up from nothing and settles out of a slow zoom while the count runs.

Any shape

Loader and hero can be different shapes. The box itself animates, so the crop changes with it.

The tag

A small line in the opposite corner for a studio name or a season, fading out on handoff.

Timing

Load time, a hold at a hundred, and the flight time, each set on its own.

Shown once

Skips itself for the rest of the visit, so nobody waits twice.

Safe by default

If the hero layer is missing it fades out instead, and the real image is always put back.

Hero Image Loader

One code component — no libraries — the loader becomes your hero