01Public reference // decision first
Choose the intent. Compose the scene.
A concise guide to the stable Velora grammar. Start with what the interface must communicate, choose a channel, then add its timeline and fallback.
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?
Six jobs cover the public motion grammar. Each route below points to one canonical family instead of a wall of presets.
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
Six channels. One element can compose several.
Channels keep behaviors independent. A card may enter once, 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.
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.
The canonical authoring model separates narrative time from visual styling, so the same HTML can live inside any host or Skin.
<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. Element lifecycle stays on enter, exit and state channels.
<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.
Expressive and immediate voices.
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.
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.