INTERACTION ENGINE / EXPERIMENT 001

Motion, on your terms.

Choose a transition, fine-tune it, replay it, and copy production-ready CSS. No libraries required.

Animation library

Select a movement. The preview and code update instantly.

Preview labelAccent colourDuration 800 msTravel distance 48 pxTiming curveDelay 0 ms

Live canvas

Reveal

ALTRA MOTION

LIVE PREVIEW · CSS KEYFRAMES

This preview only animates the element on the canvas; it doesn't interact with any other websites. The CSS can be pasted into your projects.

Export CSS

Copy the generated animation and apply the .altra-motion class to any HTML element.

HTML example

Altra Motion · Static, browser-only animation playground · Works as a standalone Cloudflare upload · Keyboard-friendly controls · Respects reduced-motion preferences.