Skip to content
Get Started

Flagship · direct the interface

One product story. Public contracts only.

Scroll this page to author a cinematic decision sequence with vl-scene, vl-stage, vl-act / vl-span, parameters and recipes. No JavaScript animation runtime — the browser owns the clock.

Scroll the pinned proof Motion catalog

Act 01 // shared clock

Hierarchy first.
Spectacle later.

Channel mixenter + scrollsame beat window · vl-span="2"
Evidence

Readable copy survives pin length. Motion stays measured. Fallback paths keep content reachable.

DecisionShip the cinematic voice.
Compare three voices
  1. Context
  2. Channels
  3. Evidence
  4. Decision
  5. Action

Act 02 // three voices · one grammar

A scene is a decision sequence.

Hover CTAs. Scroll each stage. Same track / stage / act contract — the product story chooses the choreography, not the effect name.

Brief handoff

Turn intent into momentum.

acts 1–3shared clock
Open the host proof
Core · actsRecipe · hover-liftShowcase · brief

Decision room

Choose the motion voice.

SubtleCinematicStill

Cinematic profile connected.

Core · shared clockParam · vl-motionShowcase · policy

Editorial handoff

The system becomes a point of view.

“Hierarchy arrives before spectacle.”
Core · enter + scrollRecipe · glow-breatheShowcase · editorial

Act 03 // 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>
    <p vl-enter="fade-up" vl-act="2">Copy</p>
  </div>
</section>
Host demos Archived recipes

Act 04 // progressive enhancement

Still mode keeps the readable state.

This section sets vl-motion="still" on the scene. Emulate prefers-reduced-motion: reduce in DevTools — engine CSS simplifies animation while copy and hierarchy stay intact. 

<section vl-scene vl-motion="still">
  <!-- content remains reachable without the opera track -->
</section>
Core policy matrix

Act 05 // engine boundary

Named presets stay as skin recipes.

vl-scene="cinematic-hero" and friends still work via scene-recipes.css (theme). Flagship authorship prefers track / stage / acts + P5 recipes for host portability.

Next proof

Apply four complete product voices to the same semantic interface.

Open Skins