Skip to content
Velora
Showcase
Documentation

Getting Started

A declarative motion language for HTML. Attributes describe intent; CSS executes it. Every section below includes a Test here frame — scroll or interact on the page.

Test here

Scroll inside the frame to trigger view-linked motion. Use Replay to run again.

Declarative motion

Same public API as Showcase — test in the frame, copy into your project.

<p vl-enter="fade-up" vl-timeline="view">Declarative motion</p>

Explore

Attributes

Channels v2 grammar and scene engine controls.

Scenes

Track, stage, acts — pin and scrub without JS.

Compatibility

Stable vs experimental — observable truth layer.

Installation

Velora CSS is published on npm as @veloracss.io/css (0.9.0, launch preview).

npm install @veloracss.io/css

No build step? Link the single minified motion bundle from a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@veloracss.io/css@0.9.0/dist/motion-core.min.css">

Canonical spec:Attribute grammar· Live catalog:Motion catalog· Playground:Motion Playground

Quick Start — scene engine

Track + stage + acts: one shared clock, pin, scrub — no animation runtime JavaScript.

Test here

Scroll inside — the stage pins while acts scrub on the scene clock.

Act 1

Scene clock

Scrub progress in the frame

<section vl-scene vl-timeline="view" vl-pin="2" vl-scrub>…</section>
<section vl-scene vl-timeline="view" vl-pin="3" vl-scrub>
  <div vl-stage>
    <p vl-enter="fade-up" vl-act="1">Kicker</p>
    <h1 vl-enter="clip-rise" vl-act="1">Title</h1>
    <img vl-scroll="media-zoom" vl-act="2" vl-span="2" alt="" />
  </div>
</section>

What Velora is