Animation is the fastest way to make a site feel alive, and the fastest way to make it feel broken. So we hold every effect to one test: motion guides the eye or it gets cut.
That sounds strict for a studio that ships 3D heroes and scroll-driven reveals. It is strict. It is also why the motion we do ship reads as craft instead of noise.
What motion is actually for
Motion has three legitimate jobs on a website. It directs attention to the thing that matters next. It confirms an interaction, the way a card lifting under the cursor says press me. And it establishes hierarchy in time, letting a page introduce itself in a deliberate order instead of all at once.
Everything else is decoration, and decoration ages badly. A reveal that makes a visitor wait, a parallax layer that makes text harder to read, an effect that exists because the developer just learned how to build it: cut, cut, cut.
The motion that survives the test tends to be small and slow. A 4px card lift with a deeper shadow. A border that tints toward the brand color. An arrow that nudges a few pixels on hover. Subtle is not timid; subtle is what lets a visitor feel the interface respond without ever watching it perform.
The safety contract every animation signs
Before any effect ships, it owes three guarantees. We treat these as hard gates, not aspirations.
- It works with JavaScript off. Reveal classes are added by the script, so if the script never runs, everything is simply visible.
- It honors reduced motion everywhere, in both the CSS and the JavaScript. Anyone who asks their device for less motion gets every piece of content instantly, with nothing withheld.
- It cannot stick on touch. Every hover effect has a touch twin, because iOS happily freezes a tapped card in its hover state.
Reduced motion is not an edge case to us. Vestibular disorders are real, and a spinning, sliding page can be physically unpleasant for the people who have them. Respecting the preference costs a media query. Ignoring it costs a visitor.
Ambition scales with the client
How much motion a site deserves is a brand decision, not a developer mood. A contractor's site stays restrained, because trust is the product and restraint reads as competence. A technology brand can show off, as long as it stays classy. And a passion project can carry one genuine wow moment, built with a graceful fallback for every device and every visitor who opted out of motion.
The platform keeps making the restrained version cheaper, too. Some of our scroll effects now run on native scroll-driven timelines, images settling into place with no JavaScript at all, gated so that reduced-motion visitors never see them. The best animation costs the visitor nothing: no script, no jank, no waiting.
What we cut on sight
Entrance preloaders go first. A loading curtain on a site that loads in under a second is a costume, and it makes a fast site feel slow. Custom cursors on content pages go next; people came to read, not to admire a floating dot.
We are also careful about stacking effects, and we learned that on our own homepage. Combine WebGL, JavaScript carousels, scroll reveals, blend-mode overlays, and smooth scrolling in one viewport and the frame rate buckles. Spectacle that stutters reads as broken, and broken is worse than plain.
This week we slowed our own marquee
Practice what you preach, even when it stings. Our homepage carries a giant marquee band that scrolls studio stats in enormous display type. In a screenshot it looked great. Watching it live at that type size was genuinely nauseating, exactly the kind of motion this whole post argues against.
So this week we slowed it to a third of its speed. One loop now takes 180 seconds instead of 60. It still drifts, it still earns its palate-cleanser spot between sections, and it stopped shouting. The lesson was not new, but hearing your own rule read back to you by your own homepage is humbling.
Motion versus the score
Synthetic performance tests dislike animation, and it is worth being honest about that tension. One of our richly animated pages topped out around 96 on a synthetic mobile test, because the remaining delay the test measured was the animation itself arriving. Real-world numbers on the same page sat at 99.
We kept every animation. That is the honest way to run the trade: measure what real visitors experience, present the gap plainly, and never strip working motion to flatter a lab score. But the same honesty cuts the other way. When an effect costs real users real time, no amount of beauty saves it.
Motion is a privilege the page earns by being fast, accessible, and clear first. Earn those, and a little movement makes everything feel considered. Skip them, and every animation is just one more thing standing in the visitor's way.
