Scene Engine
Channel / Layer / Reveal Predictable channel composition for enter, loop, scroll and state.Manifesto // Motion Runtime
Motion API as composed architecture.
An operational catalog for validating channels, ranges, timelines and states — editorial clarity and immediate feedback on every card.
Runtime State
entry 0% -> cover 65% Range, speed and replay per card with instant readout.
120fps pipeline
timeline armed
view + scroll ready
Selected: none
0ms
1400ms
1.00x
Core
Extended
Experimental
Catalog sections are grouped by API stability level to improve review and maintenance without removing any functional demos.
Channel Architecture
Demonstrates the main v2 API channels and the recommended composition order.
base -> enter -> scroll -> loop -> hover -> state -> exit
Channel composition reduces conflicts and maintains predictability across pages.
<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>
Enter Channel
Scroll Channel
Loop -1
Reverse Loop
Alternate Loop
3 Repetitions
Direct Duration
Hover Channel
State Channel
Exit Channel
Slide Out Left
Slide Out Right
Blur Out
Clip Drop
enter: fade-upscroll: parallaxloop: glow-breathe
Timeline Modes
Use canonical timeline contracts to define what drives each motion channel: view, scroll, hover, or auto.
<!-- 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.
Single entrance
scroll-triggered, holds state
scroll-triggered, holds state
Reveal
alias for single
alias for single
Timeline
scroll-scrubbed
scroll-scrubbed
Loop
infinite ambient
infinite ambient
Hover to play
paused until hovered
paused until hovered
Time-based
no explicit timeline binding
no explicit timeline binding
ABC
Scale with spring-like base profile
Entrances and 3D
View-timeline entry effects — from basic fade-in to extended 3D behaviours.
Fade In
Fade Up
Slide Left
Scale In
Blur In
Clip Rise
Spring Up
Glide In
Zoom Blur
Flip In
Spring 3D
Hinge Down
Stage 3D
Bloco dedicado para efeitos e cenas 3D da API. Esta seção centraliza os casos que já estão estáveis e mantém espaço para a evolução do Stage 3D em paralelo.
<!-- 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>
Contrato base já canônico e funcional. Expansões de Stage 3D podem evoluir neste bloco sem quebrar os demos atuais.
Entrada 3D com timeline view
Interação 3D por hover/focus
Hover and Interaction
Pointer, link and surface feedback, with a dedicated orb-grid mouse-tracking stage. Card-based hover components live in a dedicated section below.
Hover me
Hover me
Tilt 3D
Depth Stack
Spotlight
Shell Lift
Extended Spotlight
Hover Prism
Border Beam
Hover Card Components
Card-first interaction components grouped in their own section for API and component testing.
Group hover fan behavior for card components.
ABC
Corehover any edge
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.
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 Up
Text Reveal Down
Line Reveal
Word Rise
Typewriter full
Typewriter soft
Gradient Text Colour
Shimmer Text
System.out.println("
Hello Velora!
Hola Velora!
Hallo Velora!
Ciao Velora!
");
Hover or focus this card to swap the greeting set.
Your browser does not support the latest scroll features.
Ambient and Continuous
Loop animations for live surfaces, status indicators and cinematic backgrounds.
Shimmer
Float
Glow Breathe
Wobble
Orbit
Rock
Morph
Pulse Ring
Spin Slow
Pendulum
Breathe
Drift
Bounce
Aurora
Gradient Slide
Mesh Pan
Glitch Lite
Scanline
Ripple
Levitate X
Halo Breathe
Sweep Border
Cube Triad
Dedicated section for the cascading 3D cube choreography effect.
Tokenized 3D cube scene with layered fold choreography, no JavaScript.
Scroll and Timeline
Effects driven by view and scroll timelines — parallax, marquee, wipe and depth.
Cinema Zoom
Parallax
APIMOTIONSCROLLMARQUEE
Depth Drift
Rotate Scroll
Wipe Reveal
Depth Push
Pass Fade
enter & exit in one scroll arc
enter & exit in one scroll arc
Pass Rise
rises in, holds, fades out
rises in, holds, fades out
Pin Stories
Extended pin showcase with a large stage and safe header offset — long-form narrative scrolling with fixed anchor points.
<section vl-timeline="scroll" vl-pin="top" vl-range="entry 0% cover 78%"> <aside vl-pin="top">pinned anchor</aside> <article>narrative scroll steps</article> </section>
Use vl-pin to keep a fixed anchor in view while the surrounding content advances through narrative steps.
The first block opens the narrative while the pinned anchor maintains the visual chapter reference.
Tune vl-range to control when each part enters. entry-short keeps the transition tight and precise.
With vl-scrub, the animation tracks scroll in real time — easy to calibrate rhythm and pacing.
Final phase — prepares the scene exit and hands off cleanly to the next block on the page.
Closes with vl-once to prevent replay and preserve reading state when scrolling back up.
Pinned Scrub
Pin Center
Section A holds as a sticky base layer while the scroll continues beneath it.
On scroll, Section B rises over A — layered reading maintained throughout.
Finally, Section C enters over B and completes the overlap sequence.
Timeline Breakdown
Direct comparison of view vs scroll timelines, focusing on vl-range, vl-once and vl-scrub.
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.
One-shot entrance
Short Window
Scroll Scrub
Cover Phase
Slow View Timeline
Single (cinematic entry, not scrubbed)
Canonical entrance binding
Page Transitions
Card previews of every page-transition style used in the framework — hover, focus or click to replay.
Hover, focus or click to replay.
Directional cover transition.
Lateral movement with easing.
Radial expansion reveal.
Instant cut with micro accent.
Children Modes
Choreography modes for collections of child elements — stagger, cascade, wave and more.
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
Ranges, Speed and Runtime Params
Visual reference for all range presets, speed profiles and utility attributes for fine-tuning motion behaviour.
entryentry-shortentry-longcovercontainscene-focusexitcenterfull
fastnormalslowcinema
--vl-ease-cinematic--vl-ease-out-soft--vl-ease-spring--vl-ease-in-out-smooth
60ms100ms120ms180ms240ms320ms
Faster and softer motion profile
Default cinematic profile
Longer spring-style profile
ABC
ABC
ABC
-1 = infinite0123...
reveal-cinematicdepth-entermask-sweep
revealmedia-zoomcrossfadetext-highlight
gradient-sweepborder-trace
cinematic-herosticky-storyglass-bentoproduct-revealeditorial-cinema
Aurora Drift Loop
120ms300ms800ms1200ms2s3.6s
normalreversealternatealternate-reverse
One-shot Entry
Fast Profile
Cinema Profile
Normal Profile
Micro Window