Internal QA // exhaustive coverage

Test every preset. Protect every fallback.

Internal exhaustive inventory for regression testing, experimental proofs and preset inspection. The public Catalog stays concise and decision-oriented.

Choose an intent Understand Core See product proofs

Scene Engine

Channel / Layer / Reveal Predictable channel composition for enter, loop, scroll and state.

Runtime State

entry 0% -> cover 65% Range, speed and replay per card with instant readout.

120fps pipeline timeline armed view + scroll ready

No card selected

Select a card to inspect its active motion attributes.

D 0ms

T 1400ms

S 1.00x

Core Extended Experimental

Catalog sections are grouped by API stability level to improve review and maintenance without removing any functional demos.

Engine

motion-core

Host-agnostic scene + channel motion: vl-scene, vl-stage, vl-act, vl-enter / vl-scroll / vl-hover. Works with any UI host.

Skins

theme + recipes

Named look via data-editorial-theme and optional vl-scene="…" recipes. Not required for motion. See Skins.

How to read this Catalog

Every useful recipe answers five questions.

01Intent
What should the interface communicate?
02Channel
Which independent behavior owns the change?
03Support
Stable, progressive or experimental?
04Fallback
What readable state survives without it?
05Proof
Where is it used in a real Showcase flow?

Start with intent

Choose what the interface needs to communicate.

The Catalog is the exhaustive reference. Product components live in Elements; complete narrative compositions live in Scenes.

Lifecycle

Bring content in, take it out or transition native state.

Enter + exit State

Interaction

Respond to hover, focus, press, disclosure and top-layer intent.

Hover channels Native overlays

Reading progress

Connect motion to viewport progress, geometry or horizontal flow.

Scroll effects Ranges

Orchestration

Coordinate children, beats, acts and shared scene clocks.

Children Scene engine

Navigation

Direct cross-document movement while keeping semantic links.

Page transitions Shared channels

Experiment

Inspect emerging platform features without making them a dependency.

Support matrix 3D lab

123known presets

123demonstrated here

0untracked gaps

Every card should state intent, channel, support level, reduced-motion behavior and where the recipe is proven in the Showcase.

Modern Platform Matrix

Feature status is part of the public contract. Progressive and experimental syntax never gates semantic content or baseline interaction.

Stable

@starting-style, discrete display/overlay transitions, intrinsic-size interpolation, scroll-driven animations, popover and dialog state.

Progressive enhancement

calc-size(), customizable select, anchor positioning, scroll markers, sibling-index() and offset-path refinements.

Experimental

CSS @function, scroll-triggered animations, emerging border shapes and element-scoped View Transitions.

State · smooth

Visual properties

State · enter-exit

Discrete visibility

State · expand

Intrinsic size

No measured height or JavaScript observer.

State · top-layer

Scroll · path

Natural easing

--vl-ease-natural uses the native linear() syntax for a physical decay curve.

Experimental ledger

@supports (animation-trigger: --reveal play-forwards) { /* lab only */ }
@supports (result: if(style(--state: active): 1; else: 0)) { /* lab only */ }

/* Element-scoped View Transitions require JavaScript:
   element.startViewTransition(). They are intentionally outside Core. */

Channel Architecture

Demonstrates the main v2 API channels and the recommended composition order.

Canonical Order

base -> enter -> scroll -> loop -> hover -> state -> exit

Channel composition reduces conflicts and maintains predictability across pages.

Channel-First Markup

<article
 vl-enter="fade-up"
 vl-scroll="parallax"
 vl-loop="-1"
 vl-loop-effect="glow-breathe"
 vl-duration="1200ms"
 vl-direction="reverse"
 vl-hover="hover-lift"
 vl-state="smooth"
 vl-range="scene-focus"
 vl-speed="normal">
</article>

vl-enter

Enter Channel

vl-scroll

Scroll Channel

vl-loop

Loop -1

vl-direction reverse

Reverse Loop

vl-direction alternate

Alternate Loop

vl-loop 3x

3 Repetitions

vl-duration 1200ms

Direct Duration

vl-hover

Hover Channel

vl-state

State Channel

vl-exit

Exit Channel

vl-exit slide-out-left

Slide Out Left

vl-exit slide-out-right

Slide Out Right

vl-exit blur-out

Blur Out

vl-exit clip-drop

Clip Drop

combined

enter: fade-upscroll: parallaxloop: glow-breathe

Timeline Modes

Use canonical timeline contracts to define what drives each motion channel: view, scroll, hover, or auto.

Canonical timeline patterns

<!-- recommended pattern -->
<div vl-enter="fade-up" vl-timeline="view">...</div>

<!-- scrubbed parallax -->
<img vl-effect="parallax" vl-timeline="scroll">

<!-- ambient loop -->
<div vl-loop="-1" vl-loop-effect="float">...</div>

<!-- no timeline (time-based) -->
<div vl-enter="fade-up">...</div>

vl-timeline controls what drives the animation — viewport, page scroll, hover gate, or default time-based playback.

vl-timeline="view"

Single entrance
scroll-triggered, holds state

vl-timeline="view"

Reveal
alias for single

vl-timeline="scroll"

Timeline
scroll-scrubbed

loop-only channel

Loop
infinite ambient

vl-timeline="hover"

Hover to play
paused until hovered

time-based (no timeline)

Time-based
no explicit timeline binding

stagger delay (canonical)

ABC

preset easing (canonical)

Scale with spring-like base profile

Entrances and 3D

View-timeline entry effects — prefer vl-enter for channel-first authorship; vl-effect remains a supported alias.

Channel-first · vl-enter

Stable CONTRACT extensions — same presets as vl-effect, bound to the enter channel.

reveal-cinematicdepth-entermask-sweep

vl-enter · reveal-cinematic

Reveal Cinematic

vl-enter · depth-enter

Depth Enter

vl-enter · mask-sweep

Mask Sweep

fade-in

Fade In

fade-up

Fade Up

slide-left

Slide Left

scale-in

Scale In

blur-in

Blur In

clip-rise

Clip Rise

spring-up

Spring Up

glide-in

Glide In

zoom-blur

Zoom Blur

flip-in

Flip In

spring-3d

Spring 3D

hinge-down

Hinge Down

Coverage completion

Every known preset has a visible proof.

These compact boards close the previous Catalog gaps without turning each alias into another full-size section.

Lifecycle remainder

fade-outfade-downfade-out-downslide-rightpop-inshrink-outblur-lift

Depth + reveal remainder

3d-entryreveal-3dtilt-inunfoldrise-3dcinematic-maskimg-reveal

Progress + ambient remainder

parallax-depthscroll-scalescroll-horizontalcounter-scrollspinorbit-spintypewriter-loop

Named scene recipes

HeroStatementAction

FeatureProofDetail

StoryBeatRelease

LayerLayerLayer

Stage 3D

Reusable 3D stage contract for perspective, preserve-3d and interaction triggers. Cube-specific demonstrations remain in the experimental Cube Triad.

Stage 3D baseline

<!-- canonical 3D stage baseline -->
<section vl-scene vl-scene-trigger="zone">
  <div vl-scene-trigger-zone tabindex="0"></div>
  <article vl-effect="spring-3d" vl-timeline="view">...</article>
</section>

Positional stage contract — not tied to cube-triad choreography.

spring-3d

Entrada 3D com timeline view

hover-tilt-3d

3D response through hover and focus

Hover and Interaction

Pointer feedback — prefer vl-hover for channel-first presets. Extended interaction cards below may still use vl-effect.

Channel-first · vl-hover

Stable hover channel extensions — gradient sweep and border trace.

vl-hover · gradient-sweep

Gradient Sweep

vl-hover · border-trace

Border Trace

vl-hover · icon-shiftIcon Shift →

hover-lift

Hover me

hover-glow

Hover me

underline-expandUnderline Expand

icon-shiftIcon Shift ->

hover-tilt-3d

Tilt 3D

hover-depth-stack

Depth Stack

hover-spotlight

Spotlight

hover-shell-lift

Shell Lift

spotlight

Extended Spotlight

press

hover-prism

Hover Prism

hover-depth-press

border-beam

Border Beam

Hover Card Components

Card-first interaction components grouped in their own section for API and component testing.

hover-card-fan

Hover a card — siblings fan on the Y axis. Group container uses preserve-3d.

hover-card-stack

Layer ALayer BLayer C

Hover the stack — parent tilts in 3D and layers lift with staggered depth.

hover-cross-swap

Corehover any edge

duotone

Token-driven duotone blend for image-based components.

Illustration Editor Component

Visual editor component with HTML, CSS and JS panels over a technical block — animated purely with CSS.

illustration-editor

HTML

<div class="rect"></div>

CSS


            .rect {
            background: linear-gradient(
            -119deg,
            $gray 0%,
            $dark-gray 100%); }

JS


            </> ^-^

Editor-inspired composition converted to a declarative, tokenized, no-JS component.

Text Effects

Animated reveals and typographic effects for headings and editorial excerpts.

text-reveal

Text Reveal

text-reveal-up

Text Reveal Up

text-reveal-down

Text Reveal Down

text-line-reveal

Line Reveal

text-word-rise

Word Rise

typewriter

Typewriter full

typewriter-soft

Typewriter soft

gradient-text-color

Gradient Text Colour

shimmer-text

Shimmer Text

text-ring-orbit

code-greeting-stack

System.out.println("

Hello Velora! Hola Velora! Hallo Velora! Ciao Velora!

");

Hover or focus this card to swap the greeting set.

circle-text-scroll

Your browser does not support the latest scroll features.

Ambient and Continuous

Loop animations for live surfaces, status indicators and cinematic backgrounds.

shimmer

Shimmer

float

Float

glow-breathe

Glow Breathe

wobble

Wobble

orbit

Orbit

rock

Rock

morph

Morph

pulse-ring

Pulse Ring

spin-slow

Spin Slow

pendulum

Pendulum

breathe

Breathe

drift

Drift

bounce

Bounce

aurora

Aurora

gradient-slide

Gradient Slide

mesh-pan

Mesh Pan

glitch-lite

Glitch Lite

scanline

Scanline

ripple

Ripple

levitate-x

Levitate X

halo-breathe

Halo Breathe

sweep-border

Sweep Border

Cube Triad

Experimental extended effect — not the reusable stage-3d contract. Prefer positional stage-3d vars for production stages.

cube-triad-stage

Tokenized 3D cube scene with layered fold choreography, no JavaScript.

Scroll and Timeline

Scroll-linked motion — use vl-scroll for channel-first presets; legacy cards below still use vl-effect.

Channel-first · vl-scroll

Stable scroll channel values from CONTRACT — scrub ranges are preset-defined on the channel.

vl-scroll · reveal

Scroll Reveal

vl-scroll · media-zoom

Media Zoom

vl-scroll · crossfade

Crossfade Scrub

vl-scroll · text-highlight

Highlight sweeps as you scroll

cinema-zoom

Cinema Zoom

parallax

Parallax

scroll-marquee

APIMOTIONSCROLLMARQUEE

depth-drift

Depth Drift

rotate-scroll

Rotate Scroll

wipe-reveal

Wipe Reveal

depth-push

Depth Push

pass-fade

Pass Fade
enter & exit in one scroll arc

pass-rise

Pass Rise
rises in, holds, fades out

Scene engine

Host-agnostic track / stage / acts — shared clock, numeric pin, scrub. Canonical authorship for scroll stories. Full page: Scene Timeline.

Baseline recipe

<section vl-scene vl-timeline="view" vl-pin="3" vl-scrub>
  <div vl-stage>
    <h1 vl-enter="fade-up" vl-act="1">Title</h1>
    <p vl-enter="fade-up" vl-act="2">Later act</p>
  </div>
</section>

vl-pin is numeric viewport heights on the track (vl-scene). Sticky subject is vl-stage. Values like top/center are not the scene-engine API (boolean vl-pin alone remains a legacy sticky helper).

Live · pin + scrub + acts

Act 1 · shared clock

Track · Stage · Acts

Act 2 enters on the same scene timeline.

Act 3–4 span · holds while the track scrubs.

Act 5 · hand-off

Scroll this card’s track. Motion is CSS-only (03c-scene-engine.css + channels). Kicker + title share vl-act="1" — same beat, overlapping range.

Act overlap · same beat

Shared act 1

Title + kicker overlap

Act 2 only after act 1 window

Assign the same vl-act to stage children to choreograph overlap on one beat.

Auto clock · beat delays

Beat 1 · immediate

Beat 2 · +1 beat delay

Beat 3 · +2 beat delay

vl-timeline="auto" maps acts to time delays (no scroll pin). Use for load-in sequences outside scroll stories.

Engine attrs

vl-scene vl-stage vl-act vl-span vl-pin=1…6 vl-scrub overlap acts auto clock

vl-span extends an act across multiple beats (see live demo act 3–4).

Skin recipes (optional)

cinematic-hero sticky-story glass-bento product-reveal editorial-cinema

Named vl-scene="…" values need theme / full bundle. Prefer track/stage/acts for host-agnostic work. Skins

Timeline Breakdown

Direct comparison of view vs scroll timelines, focusing on vl-range, vl-once and vl-scrub.

Timeline mental model

view timeline

Fires when the element enters the viewport. Supports vl-once for single-play.

scroll timeline

Progresses with the scroll position. Pairs best with vl-scrub for timeline scrubbing.

view + once

One-shot entrance

view + entry-short

Short Window

scroll + scrub

Scroll Scrub

scroll + cover

Cover Phase

timeline + speed

Slow View Timeline

vl-timeline="view"

Single (cinematic entry, not scrubbed)

vl-timeline="view"

Canonical entrance binding

Page Transitions

Card previews of every page-transition style used in the framework — hover, focus or click to replay.

cinema

Hover, focus or click to replay.

wipe

Directional cover transition.

glide

Lateral movement with easing.

iris

Radial expansion reveal.

snap

Instant cut with micro accent.

Children Modes

Choreography modes for collections of child elements — stagger, cascade, wave and more.

stagger

ABC

cascade

ABC

sequence

ABC

orchestrate

ABC

wave

ABC

blur-cascade

ABC

zoom-stagger

ABC

cinema-stagger

ABC

grid-wave

ABC

spiral-stagger

ABC

Ranges, Speed and Runtime Params

Visual reference for all range presets, speed profiles and utility attributes for fine-tuning motion behaviour.

vl-range presets

entryentry-shortentry-longcovercontainscene-focusexitcenterfull

vl-speed presets

fastnormalslowcinema

canonical ease families

--vl-ease-cinematic--vl-ease-out-soft--vl-ease-spring--vl-ease-in-out-smooth

stagger step presets

60ms100ms120ms180ms240ms320ms

base subtle

Faster and softer motion profile

base balanced

Default cinematic profile

base dramatic

Longer spring-style profile

children stagger 60ms

ABC

children stagger 180ms

ABC

children stagger 320ms

ABC

vl-loop values

-1 = infinite0123...

new vl-enter values

reveal-cinematicdepth-entermask-sweep

new vl-scroll values

revealmedia-zoomcrossfadetext-highlight

new vl-hover values

gradient-sweepborder-trace

new vl-scene values

cinematic-herosticky-storyglass-bentoproduct-revealeditorial-cinema

Skin recipes (theme). Prefer track/stage/acts for host-agnostic scenes — see Scene Timeline.

scene engine

vl-stagevl-actvl-spanvl-pin=Nvl-scrub

loop aurora-drift

Aurora Drift Loop

vl-duration examples

120ms300ms800ms1200ms2s3.6s

vl-direction values

normalreversealternatealternate-reverse

vl-once + view

One-shot Entry

vl-speed fast

Fast Profile

vl-speed cinema

Cinema Profile

vl-speed normal

Normal Profile

vl-range entry-short

Micro Window