Quill docs

Motion & 3D showcase

Quill motion is a design-system axis, not page-specific animation CSS. Components opt into Motion::Press, Motion::Lift, or Motion::Tilt3d; the site/global axis retimes or disables motion with data-q-motion, and reduced-motion users always win.

Motion layers#

Layer	Status	Purpose
Component motion	BUILT	`Motion::Press`, `Motion::Lift`, and `Motion::Tilt3d` classes emitted by qquill-design.
Runtime behavior	BUILT	The `motion` / `tilt` behavior writes pointer-follow CSS variables for 3D tilt.
Global motion axis	BUILT	`smooth`, `precise`, `snappy`, `playful`, `cinematic`, `none` re-point duration/easing/press tokens.
Reduced motion	BUILT	`prefers-reduced-motion` collapses animation/transition regardless of site controls.

rust

Card::new("hero")
    .effect(Effect::Glass)
    .radius(Radius::Xl)
    .motion(Motion::Tilt3d)
    .body(el("p").child(text("Pointer-follow 3D surface")))
    .render()

Usage rule#

Use Press for buttons and compact controls; choose Precise for dense tools and Cinematic for large hero/showcase transitions.
Use Lift for actionable cards and product tiles.
Use Tilt3d only for hero/product/showcase cards where motion clarifies hierarchy.
Do not apply 3D motion to docs text, dense tables, forms, or critical controls.
Never hardcode motion durations in page CSS when a component/design token exists.