Where am I?
Transitions help people track changes in place or hierarchy. Direction communicates continuity.
01 / THE LIVE INSTRUMENT
TOUCH THE
FREQUENCY.
Drag the controls. Switch the mood. Watch the scene respond. The experience is yours to steer; the stop button actually stops it.
SCENE_001 / LIVE CANVAS● MOTION ACTIVE
GROOVE: an energetic but readable rhythm.ML / 001
CONTROL DESK
✳ 001DESIGN THE ENERGY.
Motion preferences are respected automatically. Focus mode provides an additional manual override.
02 / BEFORE THE SPARKLES
BEAUTIFUL IS NOT
ENOUGH.
Motion earns its pixels when it answers a human question.
Did that work?
Feedback should explain a state change rather than conceal a problem behind confetti.
What does it feel like?
Rhythm is part of voice. Dramatic motion is a choice, not a moral requirement.
May I stop?
A pause button, reduced-motion setting and stable layout turn spectacle into consent.
03 / THE COMPLETE LIBRARY
20 WAYS TO
MAKE IT MOVE.
Every experiment includes an actual demonstration, a copyable starter snippet, its intended purpose, and a calmer alternative. Nothing here requires a subscription or a build pipeline.
20 experiments. Select a category or search for a technique.
All 20 techniques are part of this collection. Enable JavaScript to run the visual demos and copy snippets; the field guide remains downloadable without JavaScript.
Entrance
Fade In · Slide Up · Scale Bloom · Bounce In · Stagger List
Feedback
Pulse · Shake · Color Shift · Glow Pulse · Toggle Switch
Spatial
Orbit · Wave · Bounce Path · Drift Slow · Expand Radial
Storytelling
Progress Bar · Counter Roll · Text Reveal · Cascade Fade · Parallax Layers
04 / DESIGN, DON'T JUST DECORATE
THE MOTION
RECIPE MACHINE.
Choose what your interface needs to say. Get a practical starting recipe, accessibility note, and copyable CSS. It's design guidance, not a scientific diagnosis.
RECOMMENDATION / LIVE320MS
CONFIRMATION PULSE
Brief feedback to confirm that the interface registered a change.
QUIET ALTERNATIVE / Show an immediate visible confirmation and announce the status in text.
VIEW GENERATABLE CSS +
A FRIENDLY REMINDER FROM THE LAB
THE PURPOSE
ISN'T TO MOVE MORE.
IT'S TO MEAN MORE.
Great interfaces do not demand attention merely because they can. They repay it. Sometimes that means a spectacular kinetic universe. Sometimes it means doing absolutely nothing.
SPECTACLE IS OPTIONAL. UNDERSTANDING IS NOT. ✳
05 / TAKE THE LAB HOME
THE ART OF
MOTION.
A substantial Sahilverse field guide: 20 techniques with purpose-and-restraint notes, accessibility patterns, a motion decision framework, performance practice, and a printable production QA sheet.
PDF is stored in this site, needs no login, and works offline after saving.