Act 01 // direct the sequence
A scene is meaning placed in time.
Velora gives semantic HTML a shared clock through vl-scene, vl-stage and vl-act.
The Core conducts behavior; the Skin gives the sequence a voice; the Showcase chooses what the audience should understand next.
Act 02 // shared clock
A release
finds its signal.
Evidence
Hierarchy is clear. Motion remains measured. The readable state survives every fallback.
DecisionShip the cinematic voice.
Read the sequence
- Context
- Signal
- Evidence
- Decision
- Action
Act 03 // three products · one grammar
A scene is a decision sequence.
Each composition uses the same track, stage and act contract. The product story—not the effect name—decides the choreography.
Decision room
Choose the motion voice.
SubtleCinematicStill
Cinematic profile connected.
Editorial handoff
The system becomes a point of view.
“Hierarchy arrives before spectacle.”
Act 04 // portable direction
Same vl-*. Any UI.
Import @velora/css/motion-core only. Style with Tailwind (or anything).
Showcase / @velora/css/theme is the optional Velora look — not required for motion.
<section vl-scene vl-timeline="view" vl-pin="3" vl-scrub>
<div vl-stage class="min-h-svh grid place-items-center gap-6">
<h1 class="text-5xl" vl-enter="clip-rise" vl-act="1">Title</h1>
</div>
</section>
Act 05 // engine boundary
Named presets stay as skin recipes.
vl-scene="cinematic-hero" and friends still work via scene-recipes.css (theme).
New work should prefer track / stage / acts for host portability.