The 1.2-second loader is the most important second of your site.
Why we treat the preloader like the first frame of a film — and how we built ours under a 220KB budget.
When we sit down to design a preloader, we don’t treat it as a loading state. We treat it as the opening frame of a film — the one image you carry with you for the rest of the visit. Get it right and the user reads the whole site as “premium”; get it wrong and the rest of the work has to fight your first impression for the next forty-five seconds.
Our budget is firm: 1.2 seconds total, end to end. Letter assembly: 0.55s. Hold: 0.1s. Curtain up: 0.55s. That’s it. Any longer and the user feels punished. Any shorter and the moment doesn’t land.
What we ship inside the 1.2 seconds.
- 01A physics tease — each letter falls into place with a slight overshoot. Reads as “hand-made.”
- 02A single color hold — one frame on the dark canvas before the curtain rises. Reads as “composed.”
- 03A curtain exit — the overlay slides up using expo.inOut so the page below feels like it was waiting.
The trick is that none of it is decoration. Every animation has a reason: the physics tease establishes the brand’s relationship with motion; the color hold establishes the discipline; the curtain establishes the cinematic register the rest of the site will live in.