Motion without JavaScript

On craftura.net a wall of real templates drifts across the hero. On nexusfleet.net an example dispatch board routes messages to agents. On clawpipe.dev a terminal prints its pipeline run. On deskio.org the dock icons lift when you point at them. All of it is CSS.

The pieces

• Keyframes that only touch transform, opacity or clip-path, so the browser never has to lay the page out again.
• Scroll-driven reveals with animation-timeline: view(), wrapped in @supports so older browsers show the content without the effect.
• @view-transition { navigation: auto; } for a short fade between pages.
• One rule under @media (prefers-reduced-motion: reduce) that stops every animation on the site.

Two traps

Content that starts invisible. If an element starts at opacity 0 and fades in, it has to be visible when animations are off. Keep the element's normal state visible and put the hidden state only in the keyframe, with animation-fill-mode: both.

Fading text and contrast. An accessibility audit can sample text halfway through a fade and report a contrast failure. Revealing text with a clip-path keeps its colour constant the whole time.

What it costs

Lighthouse on mobile, measured today: nexusfleet.net and clawpipe.dev home pages scored 100 for performance, accessibility, best practices and SEO; craftura.net scored 99 for performance and 100 for the rest.