Motion demo // Principles
Motion reinforces hierarchy, respects physics and degrades gracefully.
The framework ships timing, easing and stagger tokens that keep every animation intentional. If the browser or user opts out, content still works—motion is always progressive enhancement.
120fps target
prefers-reduced-motion safe
Zero JS
Act I // Reading order
Motion reinforces the reading order—it is not decoration.
Headlines enter before body text, primary actions before secondary. Stagger tokens let the framework orchestrate child elements so the eye follows a deliberate path.
<!-- orchestrate children: headlines first, then body, then CTA --> <section vl-children="orchestrate" vl-stagger="120ms"> <h1 vl-effect="fade-up" vl-timeline="view">Headline</h1> <p vl-effect="fade-up" vl-timeline="view">Body copy</p> <a vl-effect="fade-up" vl-timeline="view">CTA</a> </section>
Act II // Easing & mass
Choose easings that match the perceived mass and travel distance of the element.
Small UI elements use snappy cubic-bezier curves. Larger panels use spring easings with longer settle times. The framework ships named easing tokens so developers never invent ad-hoc curves.
Snap: 180ms
Ease: 320ms
Spring: 500ms
Dramatic: 800ms
Act III // Graceful degradation
Core content works without motion—animation is the bonus layer.
When prefers-reduced-motion: reduce is active the framework collapses all durations
to near-zero and disables transforms. Layout, hierarchy and readability remain intact.
reduced-motion query
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Safety net
Content first, always.
No information is gated behind animation. Every element is visible and usable at load time.
Act IV // Applied principles
Hierarchy, physics and progressive enhancement: three pillars for every animation decision.
Apply them in order: establish reading hierarchy, pick the right easing curve, then verify the page works with motion disabled.