Skip to content
Get Started

Act 01 // Manifesto

We choreograph interfaces like a sci-fi control room — with CSS only.

Velora is fun on purpose: dramatic staging, tactile motion language and technical precision. Every scene is declarative, fast, and runtime-native to the browser.

No JavaScript for motion: interactions and timing are attribute-driven.

API-first storytelling: each visual moment points back to a real `vl-*` contract.

Cinematic but readable: wow first, confusion never.

Open Motion Catalog Editorial Landing Framework Tour
core extended experimental
Scene engine vl-effect + vl-timeline
Cadence vl-children + vl-stagger
Safety reduced-motion aware
channel: cinematic timeline: view runtime: css-only

Act 02 // Engine Room

The core system is compact, layered, and dramatic.

The same primitives from `api-motion-catalog` power this page. What you see is not theater smoke: it is framework behavior you can copy.

Channel

Entrance choreography

vl-effect="fade-up" + vl-once
Timeline

Viewport-cued acts

vl-timeline="view"
Interaction

Tactile cards

hover-prism / hover-depth-press
Scene rhythm

Orchestrated micro-delays

vl-children="orchestrate" vl-stagger
fade-up / view
Entrance scene
parallax / scroll
Scroll-driven depth
hover-prism
Hover for prism
loop glow-breathe
Ambient loop
/* framework layers used by this page */
@import "@velora/css/tokens";
@import "@velora/css/structures";
@import "@velora/css/motion";
@import "@velora/css/transitions";

Act 03 // Scene Director

Each page is a chapter, each chapter is a runnable API demo.

Instead of one giant sandbox, Velora tells the story page-by-page. Motion, color, typography and structure are always shown in context, never in isolation.

Chapter type Reference page

Focused narrative around one system capability.

Chapter type Catalog page

Dense API matrix with grouped patterns and tags.

Chapter type Tool page

Operational playground for practical validation.

chapter.alpha Catalog-driven scene scripting
chapter.beta Narrative + API evidence in one frame
narrative runtime scene = HTML + vl-* + tokens chapter = page with real anchors story = bussola across chapters
Creative rule

Make APIs feel cinematic.

Every visual moment should reveal one concrete contract detail.

Act 04 // Canon

The story has receipts: docs and catalogs stay in sync.

About is not marketing copy. It is a guided bridge to real specs, catalogs, and implementation references.

Blueprint Motion API Design API Library Hub
packages/css
Showcase pages
Library specs
timeline hover
hover to play
children orchestrate
A B C
spring-3d entry
3D entrance

Act 05 // Launch Sequence

Now build your own chapter with the same language.

Pick a page, choose one API concept, and stage it as a mini scene. Repeat this loop and your whole framework turns into a coherent cinematic system.

Step 01 Choose the chapter goal and anchor IDs.
Step 02 Compose 3-5 acts using `vl-effect` and `vl-timeline`.
Step 03 Expose API details in cards, chips and stage blocks.
Step 04 Link to canonical catalog/doc as proof and continuity.
Study Motion API Study Design API Refine Next Page