Foundations / Motion
Motion
Motion in Champagne Paper is sparse and intentional. It communicates state changes, guides attention, and affirms interactions — nothing more. Animation is earned, not decorative.
Principles
No parallax
Parallax scrolling creates motion sickness and adds no semantic meaning. Never use it.
No scroll-triggered bounces
Playful spring animations on scroll distract from content. Reserve springs for explicit user interactions only.
Hover lifts and shadow deepening
The primary motion vocabulary. Cards lift 1px, shadows deepen by one step. Communicates interactivity clearly.
Opacity transitions only on buttons
Buttons use opacity to signal hover state — never scale, color flash, or position shift. Architectural restraint.
Scale transforms for hover
Scaling elements on hover is playful, not architectural. Reserve for image carousels where zoom is semantic.
Color animations
Rapid color changes on hover are jarring and conflict with the material world aesthetic. Use opacity instead.
Easing Curves
Click any card to replay the animation. Each curve is shown with its SVG bezier visualization and a live animated ball demonstration.
Duration Tokens
Click any row to see the duration play out in real time.
Reduced Motion
All animations in Champagne Paper respect prefers-reduced-motion: reduce.
When this preference is set, animations pause immediately — no fades, no transitions, no movement.
CSS Pattern
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Applied globally in global.css. Individual components
may use a useReducedMotion() hook for more granular control.