vl-*
Act 01 · declare intent in HTML
Motion is markup.
The browser is the runtime.
Add vl-* attributes to semantic HTML. CSS maps intent to view timelines, scroll progress and native state — no animation runtime JavaScript.
Hover the stage. Scroll the acts below. Copy the snippets.
Try the header: switch Skin, theme, or page transition — then navigate. Shared elements persist across routes.
vl-enter, vl-scroll)
pnpm generate:catalog
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 · pin + scrub teaching clock
Scroll slowly through this section. The stage pins; each card is a beat on the shared CSS clock (vl-scene + vl-act).
Beat 01 · frame
Pin the stage. Keep context.
vl-pin="2" holds the viewport while scroll advances --vl-scene.
Beat 03 · cue — descendants use vl-act / vl-enter, not nested view gates on the stage.
Beat 05 · cut — open the full scene timeline with five acts.
Lesson · vl-enter / clip-rise
Typography becomes a motion surface.
Scroll this section — vl-enter="clip-rise" + vl-range tune the view window; vl-effect="gradient-text-color" on the hero word.
Catalog → enter.
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.
Four live demos below — scroll into each, hover the fan, watch the grid wave. Every attribute is copyable from the Catalog.
Interact first: path follows scroll · fan responds to hover · grid-wave orchestrates children · loops respect reduced motion.
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.
Hover each card — preview uses the attribute on the chip below.
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 · pin+scrub
Hero Reveal
Pin the stage, scrub acts — vl-act choreographs title, evidence and handoff on one view clock.
Scene 02 · orchestrate
Feature Flow
Parent conducts children — vl-children="grid-wave" sequences tiles without per-child timers.
Scene 03 · sticky chapters
Story Pin
Rail holds orientation while depth stacks advance — Skin recipe on top of the core pin contract.
vl-effect="scene-layer-stack"Engine · scroll-linked
Scroll Reveal
Marquee strip follows container progress — vl-scroll="scroll-marquee" on the preview rail.
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 animation runtime JS.Catalog
Copy the attributes Channels, ranges, and living demos.Compatibility
Stable vs experimental Feature matrix from generated catalog data.Playground
Compose attributes Live markup + catalog-backed presets.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.