LIVE EXPERIMENTS / 01
Motion can guide attention, clarify a change, or simply make a site feel more alive. Try these small, purposeful examples—then imagine the right amount for your business.
Use to choose a preference for all core pages.
Scroll to see each example, or tap Replay. No hover needed.
Tap Replay or scroll this example into view.
A short fade and upward movement introduces a heading or visual. Content stays visible if motion is reduced. Best used once—not on every paragraph.
OPACITY + TRANSFORM · 1 SECONDStart with the question.
Find the right direction.
Take the next step.
Tap Replay or scroll this example into view.
A small delay between related elements makes a process easier to follow. The reading order remains the same for keyboards and screen readers.
STAGGERED DELAYS · 230MS APARTTap the button to see and feel the feedback.
Tap Replay or scroll this example into view.
A changing outline, color, or small lift confirms that an element is interactive. The focus outline is always visible; movement is never the only signal.
TAP + KEYBOARD + CLICK FEEDBACKA simple route, not a loading indicator.
Tap Replay or scroll this example into view.
A finite path can explain a journey or illustrate a process. This example runs once for three seconds. A real progress indicator must reflect actual progress.
KEYFRAME PATH · 3 SECONDS · ONE CYCLELet visitors choose the detail they need. Native disclosure controls work with a keyboard and don't depend on motion to be understandable.
These examples are built with standard CSS and JavaScript. They can be adapted to the examples in this collection. The best treatment depends on the content, device, accessibility needs, and performance budget.
The operating system’s reduced-motion preference is respected automatically. The switch above also lets you preview a lower-motion version. If comfortable, choose a clearly labeled one-time movement preview beside an example. It never changes your system preference. Information and navigation remain available.
Technically, many can—but more is rarely better. Start with a clear hierarchy, select a few useful moments, and test on real devices. A restrained site can be just as distinctive as an expressive one.
MOVEMENT IS ONLY ONE LAYER
Try fonts, colors, layout, spacing, button shapes and the next-step experience in a live mini-site.