Core owns
Behavior and time
Attributes, timelines, state lifecycles, fallbacks, accessibility and reduced motion.
@velora/css/motion-core
Core // the behavior layer
HTML states intent. CSS directs it.
Velora Core is a host-agnostic motion engine. Attributes describe entrances, states, scroll progress and scene beats; the platform executes them with no animation runtime.
Act 02 // architecture
One interface. Three accountable layers.
A Velora page becomes easier to author when every decision has an owner. The engine never chooses typography; the Skin never changes semantic intent; the Showcase never becomes a hidden dependency.
Skin owns
Product voice
Typography, grid, density, geometry, material, media treatment and motion personality.
@velora/css/theme
Showcase owns
Narrative proof
Real compositions that combine the public engine and a Skin without inventing a private API.
apps/showcase
Act 03 // choose the clock
The effect says what. The timeline says when.
The same entrance can play on load, follow the viewport, respond to document progress or wait for an interface state. Authors change the driver, not the component.
Opening beat
Runs from elapsed time when the page or component arrives.
vl-timeline="auto"Reading beat
Maps progress to the element crossing the viewport.
vl-timeline="view"Document beat
Uses the root scroll position as the shared progress source.
vl-timeline="scroll"Interface beat
Native open, closed, hover and focus states drive the lifecycle.
vl-state="enter-exit"Act 04 // compose the channels
One semantic card. Five independent jobs.
Each channel contributes one part of the final transform without overwriting its neighbours. This is the composition model behind simple elements and complete scenes.
Release 07Arrive with hierarchyAppears once as it enters the reading flow.
vl-enter="fade-up"Release 07Change without a jumpVisual state uses the component's shared timing voice.
vl-state="smooth"Release 07Follow reading progressProgress comes from the viewport, not an animation loop.
vl-scroll="depth-drift"Release 07Respond to intentInteraction contributes its own transform channel.
vl-hover="hover-lift"Release 07Leave with contextExit behavior remains separate from entry and state.
vl-exit="fade-out-up"baseenterscrollloophoverstateexit
Act 05 // direct responsibly
Motion is a policy, not a pile of durations.
Start with a narrative voice, then let accessibility and platform support resolve the final expression. The readable state is always the baseline.
Clear and useful
Balanced distance, duration and depth for product interfaces.
Quiet continuity
Opacity and small offsets preserve context without becoming the subject.
Directed emphasis
Layered depth and rhythm reserved for launches, stories and hero moments.
Readable by default
Reduced motion removes travel while keeping order, content and state intact.
Fallback proof
Unsupported features remove spectacle—not meaning.
No scroll timeline? Content renders in its final state. No intrinsic interpolation? The disclosure still opens. Reduced motion? Every element stays visible and ordered.
@supports (animation-timeline: view()) {
/* progressive direction */
}
@media (prefers-reduced-motion: reduce) {
/* readable final state */
}
Public support contract
Progressive by construction.
Stable
Semantic content, public attributes, page and state transitions, scroll-driven motion, popover/dialog and reduced-motion behavior.
Progressive
calc-size(), customizable select, anchor positioning, scroll markers, sibling-index() and motion paths enhance a working baseline.
Experimental
CSS functions, scroll triggers, shape syntax and element-scoped View Transitions stay in the Catalog lab and never gate Core.
Next proof
See native elements use these drivers and policies without a component runtime.
Open Elements