01Public reference // decision first
Choose the intent. Compose the scene.
134 presets, eight channels, one decision flow. Pick what the UI must communicate, scroll to live targets, copy the markup — then read the spec on docs.
Core
Behavior
Channels, timelines, state, scene clocks, accessibility and fallbacks. Host-agnostic and CSS-only.
Skin
Voice
Color, type, material, geometry and motion personality. The semantic product remains unchanged.
Start here
What does the interface need to communicate?
Pick a job — each card links to a live section with copyable snippets.
Introduce content, remove it or change visibility.
Make hover, focus, press and native state feel intentional.
Connect type, media or geometry to reading progress.
Coordinate children, beats and narrative handoffs.
Direct movement between documents with semantic links.
Inspect every preset and emerging platform feature separately.
The grammar
Channels, gates and one shared intent.
Channels keep behaviors independent. A component may enter through the viewport, react on hover, move with scroll and preserve native state without those responsibilities colliding.
<article vl-enter="reveal-cinematic" vl-scroll="media-zoom" vl-hover="hover-lift" vl-timeline="view"> ... </article>
Use channel attributes for new work. vl-effect remains a compatibility surface for named extended recipes.
Arrive with hierarchy
Initial or view-linked entrance.
Viewport gate
Gate temporal descendant motion on viewport entry.
Leave with continuity
Readable resting state without animation.
Follow progress
Animation range follows viewport progress.
Respond to intent
Hover and keyboard focus share feedback.
Maintain presence
Ambient only; disabled by reduced motion.
Preserve state
Persistent interface lifecycle.
Lifecycle + interaction
Use the smallest behavior that communicates the change.
These are the representative public recipes. The exhaustive variants remain available in Motion Lab.
Editorial arrival
Stable enter channel · still state is fully visible.
Masked reveal
Progressive clip enhancement · content remains visible.
Discrete visibility
Uses modern discrete transitions with a visible fallback.
Intrinsic dimensions
Animate toward intrinsic size without measuring it.
Native top layer, focus behavior and CSS transition.
Hover or focus
Same affordance for pointer and keyboard.
Reading progress
Choose the driver before choosing the effect.
view follows an element crossing the viewport. scroll follows a scroll container. auto maps scene acts to elapsed time.
view · element progressscroll · container progresshover · intent gateauto · elapsed time
No timeline means ordinary time-based CSS animation.
Reveal on progress
Stable baseline · composed final state on fallback.
Media zoom
Scroll-linked scale without layout movement.
Meaning appears as reading advances
offset-path enhancement · static endpoint fallback.
Focused view window
Override only when the preset range does not match the story.
Orchestration
Track. Stage. Acts. One shared CSS clock.
↓ Scroll inside the live demo — the mini stage pins while acts advance.
<section vl-scene vl-timeline="view" vl-pin="3" vl-scrub>
<div vl-stage>
<h2 vl-enter="clip-rise" vl-act="1">Context</h2>
<p vl-enter="fade-up" vl-act="2">Evidence</p>
<img vl-scroll="media-zoom" vl-act="3" vl-span="2">
</div>
</section>Behavior belongs to Core. Layout and material belong to the host or Skin.
Act 1 · context
One shared clock
Act 2 · evidence enters.
Acts 3–4 · evidence holds.
Act 5 · handoff.
ABC
Simple ordered arrival.
ABC
Mixed editorial children.
ABC
Spatial grid progression.
ABC
Discrete timed sequence.
Navigation
Page transitions belong to document movement.
Choose the voice globally and keep links semantic. Hover, focus or click each card to preview the handoff — or use the header selector to navigate between pages.
<html vl-page-transition="cinema"> <header class="vl-vt-shared-nav">...</header> <a class="vl-vt-shared-brand">...</a> </html>
Editorial depth and continuity.
Directional document change.
Quiet spatial handoff.
Radial expansion reveal.
Instant cut with micro accent.
Support + parameters
Modern CSS is progressive by contract.
Experimental syntax never gates content, navigation or native state. Reduced motion always resolves to a readable composed state. Full compatibility matrix →
Stable
@starting-style, discrete transitions, intrinsic-size interpolation, scroll-driven animation, dialog and popover state.
Progressive
calc-size(), anchor positioning, customizable select, scroll markers, sibling-index() and motion paths.
Motion Lab
CSS functions, scroll triggers, emerging shapes and element-scoped View Transitions.
standardsubtlecinematicstill
fastnormalslowcinema
entry-shortcoverscene-focusfull
normalreversealternate
The Motion Lab preserves exhaustive preset proofs, aliases, experimental components and QA controls without making them part of the public learning path.
Canonical registry
Generated from packages/catalog/
Preset counts and metadata are derived from CSS + grammar — never hardcoded. Run pnpm generate:catalog after API changes.
| Preset | Channel | Usage | Status | Reduced motion |
|---|