Immersive website design is timed motion, not more effects.

Play with the curve above and one thing gets obvious fast: the same movement, over the same distance and the same duration, feels completely different depending on the shape of its acceleration. Linear motion — constant speed, start to finish — reads as mechanical, because nothing you have ever touched moves that way. Real objects start slow, speed up, and settle under friction. Ease-out mimics that arrival, which is why entrances use it and why a flat linear fade always feels a little cheap.

A cubic-bezier is just four numbers describing that acceleration. The playground draws the curve and hands you the exact CSS, so you are not copying magic values out of a tutorial and hoping. Push the control points past the edges and you get overshoot — a small spring that adds life. Push too far and it becomes a bounce that charms once and irritates on the tenth visit. Knowing where to stop is the actual skill; the tool just makes the tradeoff visible.

The fastest way to wreck an immersive site is to make it move too much. Two culprits do most of the damage: heavy parallax and hijacked scrolling. Both create a mismatch between what the eye sees and what the inner ear expects, and for a real share of visitors that mismatch is nausea, not wonder. Depth should be suggested, not shoved — a background drifting slightly slower than the foreground, a card lifting a few pixels on hover, blur and shadow doing the work that large movement would.

prefers-reduced-motion is not a box you tick at the end. It is a designed state. On my builds the reduced-motion version still looks intentional — cross-fades instead of slides, instant instead of scrubbed — so a visitor who needs a calm site gets one, not a broken one.

On an immersive site the scroll position is the clock — reveals, pins, and depth are all keyed to it. The temptation is to seize the scroll itself: slow it down, snap it to sections, scrub a long video frame by frame. That is where immersion turns into a fight. The instant a visitor's normal scroll speed stops working, the site reads as broken, not premium. The good version keys motion to scroll while leaving the scroll untouched, so the visitor stays in control and the page rewards them for moving.

Native CSS scroll-driven animation and Intersection Observer now cover most of what people reach for a heavy library to do, at a fraction of the weight. I lean on those first, keep any pinned or scrubbed moment short and skippable, and make sure the content still reads top to bottom with motion switched off. Choreography should feel like the page anticipating you — never steering you.

Motion gets expensive when it animates the wrong properties. Width, height, top, left — anything that changes layout forces the browser to recompute the page, and on a mid-range phone that is exactly where the jank lives. Transform and opacity are the exceptions: the compositor handles them on the GPU without touching layout, so a slide, scale, or fade can hold 60fps while the rest of the page stays put. Everything immersive I ship is built on those two properties, with the heavy spectacle mounted after first paint so the headline is still the LCP. The homepage loom is the public version of that discipline — tear it apart on your phone and the numbers hold.