Skip to content
Get Started

HTML states intent.
CSS directs it.

Act 01 // the behavior layer

Scroll this page — one pinned track, eight beats. Attributes declare entrances, clocks, channels and policy. No animation runtime; only the browser.

Use the bussola (right) or keep scrolling. Each chapter holds copy while scroll scrubs the layer stack.

Enter the layers Scene grammar
Public grammar · vl-* 134 presets · 8 channels · zero runtime

Core owns behavior—not the look. Skins voice it. Showcase proves it.

Act 02 // architecture

One interface.
Three owners.

01 · Core

Behavior and time

Attributes, timelines, state lifecycles, fallbacks, accessibility and reduced motion.

@velora/css/motion-core
02 · Skin

Product voice

Typography, grid, density, geometry, material, media and motion personality.

@velora/css/theme
03 · Showcase

Narrative proof

Real compositions combining the public engine and a Skin—no private API.

apps/showcase
  1. Core
  2. Skin
  3. Showcase
  4. Contract
  5. Proof

Act 03 // choose the clock

The effect says what.
The timeline says when.

One effect · four clocks fade-up auto · view · scroll · hover
Auto

vl-timeline="auto" — opening beat from elapsed time.

View / Scroll Reading & document progress
  1. Auto
  2. View
  3. Scroll
  4. State
  5. Scene

Act 04 // compose the channels

One card.
Five jobs.

Channel stack · compose

Channels live

Arrive with hierarchy

5 channels · one card
EnterHoverStateScroll
Inspect ownership

Each channel contributes one transform job without overwriting its neighbours.

Hover + state

Pointer and lifecycle keep independent voices on the same card.

Overlay Popover · top-layer
Direct responsibly
Composition order

base → enter → scroll → loop → hover → state → exit

Act 05 // direct responsibly

Motion is a policy, not a pile of durations.

Start with a narrative voice. Accessibility and platform support resolve the final expression. The readable state is always the baseline.

vl-motion="standard"

Clear and useful

320msbalanced travel

Product interfaces stay measured.

Core · standardReadable baseline

vl-motion="cinematic"

Directed emphasis

2×launch depth
Core · cinematicHero / story

vl-motion="still"

Readable by default

SubtleStillReduce

Order without travel.

Core · stillprefers-reduced-motion
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.

Experimental

Catalog lab only—never gates Core.

Next proof

See native elements use these drivers and policies without a component runtime.

Open Elements