motion rule system
Motion Rule Picker
Motion should come from a few reusable decisions, not from tweaking sliders until it feels okay.
Motion should come from a small set of decisions, not a slider hunt.
preview: lets the image arrive before the copy feels heavy
Move 48px over 250ms with standard easing.
the starting point
A motion token by itself does not tell you much. 180ms can feel crisp for hover feedback and invisible for a larger route change.
setting up the rules
The study shows three production-facing rules: hover, preview handoff, and route entry.
Each rule pairs distance, duration, and easing with the kind of interaction it belongs to.
That makes critique concrete. Instead of inventing a new curve each time, the interface chooses from a small vocabulary.
polishing the rule
The output should be a reusable decision, not just a playground. The best values become small rules for the rest of the site.
## Motion Decision Tree
What is moving?
├── Hover feedback
│ ├── Token: tweens.fast
│ ├── Duration: 180ms
│ └── Easing: standard
│
├── Preview handoff
│ ├── Token: tweens.base
│ ├── Duration: 250ms
│ └── Easing: standard
│
└── Route or layout entry
├── Token: tweens.slowInOut
├── Duration: 350ms
└── Easing: in-outDuration only makes sense when it is paired with distance, easing, and interaction weight.
rules I keep
hover 180ms small text and row feedback
preview 250ms media and proof handoff
route 350ms larger spatial changes
final code
<motion.div
animate={{ opacity: 1, y: 0 }}
transition={tweens.base}
/>