Cinematic Motion That Stays Fast and Accessible

Motion is what makes a site feel crafted: a globe you can spin, a headline that rises into place, particles that drift as you scroll. It's also the fastest way to make a site slow, broken on phones, and unreadable to anyone who can't or doesn't want to see it move.

This is how I deal with that, using this site and Solvaro (an agency site I built) as examples.

Design for the phone at the same time

On Solvaro, the home page is built around a particle globe you can drag to rotate (Three.js), an LED tile wall that carries the messaging, and a day and night theme that changes the mood of the whole site. Every one of those effects was designed for phone and desktop together, not shrunk down afterwards.

On this site, the hero particles run on phones too, but with fewer points: 3,000 instead of the desktop count. The page looks the same everywhere; it just does less work on a smaller device.

Content first, motion second

The most important rule: **the content must be complete before any animation runs.**

• On this site, text is visible without JavaScript. Elements are only hidden for their entrance animation after the script has loaded and added a class to the page. If the script fails, nothing stays invisible.
• Projects, services, the FAQ and blog posts are written into the HTML at build time. Search engines and AI tools that don't run JavaScript still read everything, and the animation is added on top.

A beautiful entrance animation on an empty page is worse than no animation at all.

Respect reduced motion

Some people get dizzy or sick from large movement on screen, and set "reduce motion" on their device. When that setting is on, this site skips the scroll-driven animations and the smooth-scroll effect and shows the content in place. It's one check at the start, and it matters a lot to the people who need it.

Choreograph, don't decorate

Scroll motion on this site is driven by GSAP with Lenis for smooth scrolling. A few habits keep it smooth:

• Animate transforms and opacity, not layout. Moving something with a transform is cheap; changing its width or position in the layout isn't.
• Tie big movements to the scroll position instead of timers, so the page always matches where the visitor is.
• Load heavy pieces, like the WebGL particles, only when they are needed, as a separate file.

One source of truth for the look

On Kathalo, every design token (colours, type, spacing, radii) lives in one file, so a rebrand is a settings change rather than a rewrite. This site does the same with CSS custom properties: the red, the blacks and the three typefaces are defined once and used everywhere.

Don't let the cache mix old and new

One bug taught me this. Browsers and CDNs cache JavaScript and CSS for days, and a visitor once got new HTML with old scripts, which broke the page. Now every bundle link carries a short fingerprint of its content, so a new build is always picked up while unchanged files stay cached.

Glass, used sparingly

Frosted-glass surfaces look good in screenshots, but every layer of background blur costs rendering time, especially on mid-range phones. I use them where they help readability on top of imagery, like the glass volume bar on Smart Agentic TV, rather than on every card.

The short version

• Design for phones and desktops at the same time.
• Make the content complete without JavaScript; add motion on top.
• Turn motion down when the visitor asks for it.
• Animate cheap properties, tied to scroll, and load heavy effects lazily.
• Keep the design system in one place.

If you want a site that feels this crafted but still loads fast and reads well in search, let's talk. You can also look at Solvaro and the rest of my work.