Static sites that feel alive: 3D, motion and a 2-second budget

Static sites have a reputation for being fast and a little lifeless. They do not have to be. A statically generated Nuxt site can carry a 3D hero and scroll-driven motion and still show its first screen in under two seconds on a mid-range phone, if every effect respects one budget.

Two seconds is a budget, not a goal

We treat two seconds to a usable first screen as money in an account. Fonts, the hero, the first section: each one spends from it. Anything that does not fit waits until after the page is usable, or does not ship.

• Write down the budget before the design review, not after the first audit
• Give every effect an owner and a cost in milliseconds
• Cut the effect, not the budget, when they collide

Ship the HTML first

Every page is prerendered, so the browser gets readable content in the first response. The 3D scene and the motion library load as lazy chunks after that, and the markup always shows each effect's end state, so a slow connection or prefers-reduced-motion still gets the whole page.

Motion that waits its turn

Motion should explain the page, not decorate it. Headlines rise once, sections reveal as they arrive, and nothing moves while the reader is trying to read. Everything starts only after the first screen is in place.

If an animation would be missed when it is gone, keep it. If not, cut it.

Measure on the slowest phone in the room

A developer laptop flatters everything. We test on a throttled mid-range Android phone over a slow connection, and the budget is checked in the build, so a heavy image or an eager import fails before a Visitor ever sees it.