Act 01 · Core directs · Skins give voice · Showcase proves
Build the scenes modern products are remembered for.
Declare intent in semantic HTML. Modern CSS orchestrates depth, type, scroll, state and handoffs. Change the Skin — not the product structure — to create an entirely new visual world.
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 02 · one shared clock
Five beats, one release decision. The Core controls time; the Skin controls atmosphere.
Context · Release 07
A signal enters the room.
Evidence arrives second: 72% team alignment.
The evidence holds while the stage stays pinned and the story advances.
The decision lands last: ship the cinematic voice.
Lesson · vl-enter / clip-rise
Typography becomes a motion surface.
Channel: enter. Type scale and reveal are engine; the font stack is a Skin. Copy from Catalog. See catalog.
Weight
400 → 900
Scale
clamp()
Timeline
view()
BOLDER
Scroll can tune variable type, weight, width, tracking and rhythm.
Lesson · horizontal pin
Walk the system, not a static demo.
Scroll-scrubbed lane: engine. Panel chrome is Skin look. Authorship model: Timeline.
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 05 · the Catalog becomes direction
One motion grammar. Four moments users can feel.
The attributes below are not decorative samples. Together they stage discovery, evidence, interaction and atmosphere — directly in semantic HTML.
intent
impact
Motion follows the story’s route.
offset-path turns progression into a visible journey, with a static endpoint as fallback.
Depth appears exactly when it matters.
Hover or focus a layer. The component choreographs its siblings without a JavaScript animation runtime.
enterexithoverscroll
staterangepinscrub
One parent conducts the whole ensemble.
Children inherit rhythm and sequencing, keeping expressive compositions readable in the markup.
Ambient motion makes the system feel alive.
Independent loop channels create presence while reduced-motion keeps the same visual hierarchy still.
Lesson · scenes vs Skins
Reusable motion chapters for real pages.
Track / stage / acts is the engine. Named scene recipes and cards are Skin look. Timeline · Skins.
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"Lesson · vl-pin + depth
Hold the frame. Bend the depth.
Engine: pin + scroll layers. The cinematic chrome is a Skin. Timeline.
vl-pin locks the shot.
Light moves behind the interface.
The scene exits before the map arrives.
Final act · choose your starting point
Six focused areas. One engine for the whole journey.
Start with the promise, inspect the mechanics, then remix the same semantic product through a new Skin.
Skins
Retoken the project Named models via data-editorial-theme. Cards here are Skin look.Timeline
Author native motion Track, stage, acts — pin and scrub with zero JS.Catalog
Copy the attributes Channels, ranges, and living demos.Hosts
Engine without Skins motion-core plus Tailwind or any UI.Archive
Previous Showcase Hero recipes, tools, and DS pages kept in the repo.Home
This trailer Dense demos with a lesson on every beat.