Cinematic CSS direction for the web
Direct the page like a sequence, not a stack of effects.
Velora gives teams a CSS-first language for frames, cues, transitions, and scene rhythm — declared in markup, rendered natively, and guarded by accessible motion defaults.
Scene language
Frame. Cue. Cut.
A Velora page should read like a short sequence: first the world, then the motion grammar, then the next scene.
- Frame Set the atmosphere with one dominant backdrop.
-
Cue
Use
vl-enter,vl-scroll, andvl-hoveras direction marks. - Cut Let each handoff feel intentional, not stacked.
Act II · Display
Typography becomes a motion surface.
Type is not decoration here. It carries hierarchy, pacing, emphasis, and brand character through CSS-driven scale, timing, and reveal behaviors.
Weight
400 → 900
Scale
clamp()
Timeline
view()
BOLDER
Scroll can tune variable type, weight, width, tracking and rhythm.
Type becomes choreography: weight, width, tracking, and scroll range move from the same token map.
Pair with type spec, composition, and design tokens.
Scroll-linked text orbit.
Act III · Lanes
Walk the system, not a static demo.
Each lane shows how motion, color, typography, and architecture connect into one production-ready system for launches, product surfaces, and editorial experiences.
Lane 01
Motion core
Declare entrances, timelines, hover states, and orchestration in HTML instead of wiring a runtime animation layer.
Lane 02
Color system
Semantic tokens coordinate surfaces, glow, contrast, and ambient depth across themes, scenes, and product states.
Lane 03
Typography
Display scale and reading rhythm are tokenized, so brand expression stays consistent across dense UI and large-format storytelling.
Lane 04
Architecture
Cascade layers and modular bundles keep the system adoptable for teams that want premium motion without losing control of CSS.
Act IV · Scenes
Reusable motion chapters for real pages.
Scene wrappers package layout, timing, density, and interaction into repeatable sections teams can ship across launches, docs, and product storytelling.
Scene contract
One scene language across every page.
Author scenes with the same surface-level grammar across the system:
vl-scene,
vl-effect,
vl-timeline, and density tokens.
- Layout
cinematic-hero- Flow
glass-bento- Narrative
sticky-story
Scene 01
Hero Reveal
Launch-value surfaces with staged copy, brand media, CTAs, and immediate narrative focus.
vl-scene="cinematic-hero"Scene 02
Feature Flow
Capability groups that sequence in, clarify hierarchy, and settle into scannable product proof.
vl-effect="scene-feature-flow"Scene 03
Story Pin
Sticky chapters that preserve orientation while the narrative advances through depth and emphasis.
vl-scene="sticky-story"Engine
Scroll Reveal
The core motion engine behind entrances, exits, ranges, and section handoffs across the system.
vl-timeline="view"Act V · Signature
Hold the frame. Bend the depth.
A pinned shot, a moving light field, and a few CSS layers turn scroll into a camera cue.
vl-pin locks the shot.
Light moves behind the interface.
The scene exits before the map arrives.
Act VI · Map
Choose the part of the sequence you want to inspect.
The homepage is the trailer; each destination below opens the mechanics behind a frame, cue, transition, or scene.
Tokens
Build the foundation Semantic color, spacing, radius, elevation, and theme primitives.Motion
Author native motion Scroll, view, enter, exit, loop, hover, and scene contracts.Typography
Scale brand expression Display systems, composition, and dense interface reading.Tooling
Audit the system Contrast, architecture, conversion, and framework checks.Aethel
Architectural dark Black field, copper massing, restrained motion, and structural grids.Meridian
Terrain intelligence Glass panels, terrain greens, map rhythm, and analytical depth.