+
+
+
diff --git a/apps/docs/src/lib/catalog.ts b/apps/docs/src/lib/catalog.ts
new file mode 100644
index 0000000..5b86353
--- /dev/null
+++ b/apps/docs/src/lib/catalog.ts
@@ -0,0 +1,34 @@
+import catalogSummary from "@velora/catalog/summary";
+import presetsBundle from "@velora/catalog/presets";
+import compatMatrix from "@velora/catalog/compatibility-matrix";
+
+export type CatalogSummary = typeof catalogSummary;
+export type Preset = (typeof presetsBundle.presets)[number];
+export type CompatibilityMatrix = typeof compatMatrix;
+
+export function getCatalogSummary(): CatalogSummary {
+ return catalogSummary;
+}
+
+export function getPresetsByAttribute(attribute: string): Preset[] {
+ return presetsBundle.presets
+ .filter((preset) => preset.attribute === attribute)
+ .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function getCompatibilityMatrix(): CompatibilityMatrix {
+ return compatMatrix;
+}
+
+export function formatChannelLabel(channel: string): string {
+ if (channel === "pageTransition") return "page transition";
+ return channel;
+}
+
+export function formatGeneratedAt(iso: string): string {
+ return new Date(iso).toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+}
diff --git a/apps/docs/src/lib/site.ts b/apps/docs/src/lib/site.ts
new file mode 100644
index 0000000..9b20b21
--- /dev/null
+++ b/apps/docs/src/lib/site.ts
@@ -0,0 +1,13 @@
+/** Public surface URLs — keep in sync with docs/project/DEPLOY.md */
+export const SITE = {
+ showcase: "https://veloracss.io",
+ docs: "https://docs.veloracss.io",
+ github: "https://github.com/erikconnect/Velora",
+ /** Hostinger VPS — WordPress + static host examples (configure when live) */
+ examples: "https://examples.veloracss.io",
+} as const;
+
+export function showcaseUrl(path = ""): string {
+ if (!path) return SITE.showcase;
+ return `${SITE.showcase}${path.startsWith("/") ? path : `/${path}`}`;
+}
diff --git a/apps/docs/src/pages/agents.astro b/apps/docs/src/pages/agents.astro
index 2c41b5f..2e474d2 100644
--- a/apps/docs/src/pages/agents.astro
+++ b/apps/docs/src/pages/agents.astro
@@ -1,5 +1,6 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
@@ -7,11 +8,16 @@ import Base from "../layouts/Base.astro";
Agent Handbook
- This is the operational guide for AI coding agents working on Velora — including GitHub Copilot,
- Cursor, and similar tools. It defines the product thesis, non-negotiable rules, attribute system
- contract, and safe prompting patterns that all agents must follow.
+ Operational guide for AI agents on Velora. Demos on other pages use the same public
+ vl-* API — test there, do not invent showcase-only motion.
+
+
+ If the docs frame can replay it, it is a public Velora feature.
+
+
+
Product Thesis
@@ -28,11 +34,10 @@ import Base from "../layouts/Base.astro";
<section
vl-scene="hero"
vl-timeline="view"
- vl-effect="scene-hero-reveal"
vl-range="entry 0% cover 70%"
vl-pin>
- <h1>Build motion-rich interfaces with HTML and CSS</h1>
- <p>No animation libraries. No framework runtime.</p>
+ <h1 vl-enter="fade-up">Build motion-rich interfaces with HTML and CSS</h1>
+ <p vl-enter="fade-up" vl-delay="120ms">No animation libraries. No animation runtime JS.</p>
</section>
@@ -116,33 +121,40 @@ import Base from "../layouts/Base.astro";
Attribute
Purpose
Example values
-
vl-scene
Marks a motion-aware scene container
"hero", "story", "features"
-
vl-effect
Declares the named effect preset
"fade-up", "flow-in", "scene-hero-reveal"
-
vl-timeline
Declares the progress model
"view", "scroll", "auto", "hover"
+
vl-enter
Entrance preset (preferred channel)
"fade-up", "clip-rise", "blur-in"
+
vl-scroll
Scroll-linked preset
"media-zoom", "parallax"
+
vl-hover
Hover / focus interaction preset
"hover-lift", "underline-expand"
+
vl-effect
Legacy / composite preset escape hatch
"fade-up", "flow-in"
+
vl-scene
Scene track — shared clock, optional pin height
presence or named recipe
+
vl-stage
Sticky viewport stage inside a scene
presence only
+
vl-act / vl-span
Beat index and duration on scene clock
vl-act="2", vl-span="3"
+
vl-in-view
Temporal viewport gate (replay on re-entry)
presence only
+
vl-timeline
Progress model
"view", "scroll", "auto", "hover"
vl-range
Active progress range for timeline motion
"entry 0% cover 40%"
-
vl-pin
Boolean — pinned/sticky scene behavior
presence only
-
vl-scrub
Boolean — scroll-scrubbed animation
presence only
-
vl-once
Boolean — animate once only
presence only
+
vl-pin
Pinned scene track height (viewport multiples)
vl-pin="3"
+
vl-scrub
Scroll-scrubbed linear fill
presence only
+
vl-once
Animate once only
presence only
vl-children
Child choreography mode
"stagger", "cascade"
vl-stagger
Stagger delay override
"fast", "slow", numeric
-
vl-depth
Depth/parallax intensity modifier
"shallow", "deep"
-
vl-speed
Duration/speed modifier
"slow", "fast"
-
vl-targets
Selects specific descendant targets
CSS selector string
-
vl-page-transition
Page transition preset
"fade", "slide", "morph"
-
vl-transition
Shared element or local transition
"cover"
+
vl-motion
Subtree motion mode (engine token scale)
"standard", "cinematic", "still"
+
vl-page-transition
MPA page transition preset on <html>
"cinema", "wipe", "glide"
Primitive vs Scene Presets
This distinction is mandatory.
- A primitive effect affects the element itself:
+ A channel preset affects the element itself:
-
<div vl-effect="fade-up"></div>
+
<div vl-enter="fade-up" vl-timeline="view"></div>
- A scene preset coordinates the element and its descendants:
+ A scene coordinates children on a shared clock:
diff --git a/apps/docs/src/pages/attributes.astro b/apps/docs/src/pages/attributes.astro
index 5d4a779..775ff27 100644
--- a/apps/docs/src/pages/attributes.astro
+++ b/apps/docs/src/pages/attributes.astro
@@ -1,344 +1,85 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
-
+Reference
Attribute Reference
- Complete reference for every vl-* HTML attribute. Attributes are Velora's
- declarative grammar — they express intent, not implementation.
+ Velora motion is declared with vl-* HTML attributes. Prefer channels
+ for new work. Each section includes a live frame — Test here.
-
Quick Reference
-
-
-
Attribute
Type
Brief
-
-
-
vl-effect
enum
Named motion preset
-
vl-timeline
enum
Animation progress model
-
vl-range
enum
Scroll-driven animation range
-
vl-scene
string
Scene container marker
-
vl-children
enum
Child choreography mode
-
vl-stagger
duration
Stagger interval override
-
vl-depth
number
Motion distance multiplier
-
vl-speed
enum
Duration category override
-
vl-pin
boolean
Sticky positioning
-
vl-scrub
boolean
Linear scroll-linked timing
-
vl-once
boolean
One-shot animation
-
vl-targets
selector
Descendant target hint
-
vl-page-transition
enum
Cross-document page transition preset
-
vl-transition
string
Shared element / local transition
-
-
-
-
-
-
vl-effect
-
- Declares the named motion preset to apply to this element. See the
- Effects reference for full
- descriptions of each value.
-
- Overrides the default stagger step (--vl-stagger-step: 45ms) for vl-children.
-
-
-
-
Value
Delay per child
-
-
-
60ms
60ms
-
80ms
80ms
-
100ms
100ms
-
120ms
120ms
-
150ms
150ms
-
200ms
200ms
-
-
-
-
-
-
vl-depth
+
Channels (preferred)
+
+
+
+
vl-enter
+
fade-up on view
+
+
+
vl-hover
+
Hover this card
+
+
+
+
+
vl-in-view gate
- Multiplies the translation distance (--vl-motion-distance) for entrance effects.
- Affects fade-up, fade-down, slide-left, slide-right,
- flow-in, and other translate-based effects.
+ Temporal gate — descendant motion replays when the gate re-enters the scrollport.
+ Requires container-type: style (Chrome 128+, Safari 18+); otherwise
+ vl-in-view is inert and children animate on their own timelines.
- Boolean attribute. Makes the element sticky (position: sticky; top: 0) at
- z-index: 200. Use on scene sections that should remain fixed during scroll.
-
-
<section vl-scene="hero" vl-pin>
- <!-- Stays at top of viewport while parent scrolls -->
-</section>
-
-
-
-
vl-scrub
-
- Boolean attribute. Switches timing to linear (animation-timing-function: linear) and
- sets animation-fill-mode: both. Use with scroll-driven effects where you want
- direct scroll-to-animation scrubbing without easing curves.
-
- A CSS selector string that hints which descendants should be targeted by the scene or children
- system. CSS-only support is limited — primary use is for documentation and future runtime hooks.
-
- Named motion presets applied via the vl-effect attribute. All effects are pure CSS —
- no JavaScript involved.
+ Prefer channels v2: vl-enter, vl-scroll, vl-hover, etc.
+ vl-effect remains a legacy/composite escape hatch. All motion is CSS-only — zero animation runtime JavaScript.
+ See Attribute Reference.
+ Full searchable registry:
+ Showcase catalog
+ · source packages/catalog/ via pnpm generate:catalog
+
+
+
+
How channels work
+
+
Channel-first
+
+ Prefer vl-enter, vl-scroll, vl-hover — not legacy vl-effect
+
+
- Add vl-effect to any element to apply a preset. Combine with
- vl-timeline to control when the animation plays:
+ Pick the channel that owns the behavior, then add vl-timeline when you need a progress model:
-
<!-- Plays immediately on page load -->
-<h1 vl-effect="fade-up">Heading</h1>
+
<!-- Entrance (preferred) -->
+<h1 vl-enter="fade-up">Heading</h1>
-<!-- Plays when element enters the viewport -->
-<div vl-effect="blur-in" vl-timeline="view">Content</div>
+<!-- Viewport-gated enter -->
+<div vl-in-view>
+ <p vl-enter="fade-up" vl-timeline="view">Content</p>
+</div>
-<!-- Plays once, stays visible after -->
-<div vl-effect="clip-rise" vl-timeline="view" vl-once>One-shot reveal</div>
+<!-- Scroll-linked -->
+<img vl-scroll="media-zoom" vl-timeline="view" alt="" />
-<!-- Custom depth and speed -->
-<div
- vl-effect="fade-up"
- vl-timeline="view"
- style="--vl-motion-distance: 2.5rem; --vl-motion-duration: 700ms;">
- Deep, slow reveal
-</div>
+<!-- Legacy composite (avoid for new work) -->
+<div vl-effect="blur-in" vl-timeline="view">…</div>
-
Entrance Primitives
+
Entrance presets (vl-enter)
+
+ {enterPresets.length} presets from the generated catalog ({generatedLabel}). Prefer channels for new markup — not legacy vl-effect.
+
Affect the element itself. Best combined with vl-timeline="view" for scroll-driven reveals.
Clip-path reveal from bottom. Text feels like it emerges from the page.
-
800ms
-
-
-
tilt-in
-
Perspective rotateY entry. Great for cards arriving from the side.
-
800ms
-
+ {enterPresets.map((preset) => (
+
+
{preset.name}
+
{preset.status}
+
{preset.reducedMotion ?? "static"}
+
+ ))}
@@ -111,51 +104,56 @@ import Base from "../layouts/Base.astro";
Custom entrance
</div>
-
Live Demo
-
-
-
fade-up
-
Opacity + translate Y.
-
-
-
blur-in
-
Cinematic blur dissolve.
+
Live Demo — entrance
+
+
+
+
fade-up
+
Opacity + translate Y.
+
+
+
blur-in
+
Cinematic blur dissolve.
+
+
+
reveal-3d
+
Perspective rotateX entry.
+
-
-
reveal-3d
-
Perspective rotateX entry.
-
-
+
-
Interaction Effects
+
Interaction presets (vl-hover)
- Applied to interactive elements. These respond to user hover — no timeline needed.
+ Applied via vl-hover on interactive elements — no timeline needed.
+ {hoverPresets.length} presets in the generated catalog.
+
+
+
+
hover-lift
+
Lift + shadow
+
+
+
hover-glow
+
Primary glow ring
+
+
+ underline-expand
+
+
+
-
Value
Trigger
Description
+
Value
Status
Reduced motion
-
-
hover-lift
-
:hover
-
Translates up 4px + floating shadow. Classic card hover.
-
-
-
hover-glow
-
:hover
-
Adds a primary-colored glow shadow ring. Great for media embeds.
-
-
-
underline-expand
-
:hover
-
Expanding underline grows from center. Elegant nav link effect.
-
-
-
icon-shift
-
:hover
-
Last child (icon/arrow) shifts 4px on hover. Use on inline elements with an icon sibling.
-
+ {hoverPresets.map((preset) => (
+
+
{preset.name}
+
{preset.status}
+
{preset.reducedMotion ?? "static"}
+
+ ))}
@@ -177,6 +175,44 @@ import Base from "../layouts/Base.astro";
Touch devices: Hover effects automatically disable via @media (hover: none).
+
Scroll presets (vl-scroll)
+
+ Scroll-linked transforms. {scrollPresets.length} presets — usually paired with vl-timeline="view" unless the preset is inherently scroll-driven.
+
Used with toggled elements like accordions, drawers, and panels. Typically paired with
@@ -209,26 +245,8 @@ import Base from "../layouts/Base.astro";
Continuous / Ambient Effects
- Loop indefinitely. Use to add life to decorative elements, loading states, or ambient backgrounds.
- Always respect prefers-reduced-motion — wrap with the media query if adding ambient
- effects to content-critical elements.
+ See the generated loop preset table above. Examples below use legacy vl-effect — prefer vl-loop / vl-loop-effect for new markup.
-
-
-
Value
Loop duration
Description
-
-
-
shimmer
2.5s
Background shimmer sweep. Use on skeleton loaders or accent lines. Requires background-size: 200% auto and a gradient background.
-
float
5.5s
Gentle vertical bob. Great for hero illustrations.
-
glow-breathe
3.5s
Pulsing box-shadow. Use on live indicators or accent dots.
-
wobble
2.8s
Tilt oscillation (±3deg). Attention-grabbing but subtle.
-
orbit
14s
Circular orbit — full 360deg spin. For orbital icons or decorative rings.
-
rock
4s
Wider tilt oscillation (±6deg). More playful than wobble.
-
morph
8s
Organic border-radius morphing. Use on blobs and abstract shapes.
-
elastic-in
0.7s
Springy scale-in entrance. One-shot spring pop, not a loop.
-
-
-
<!-- Floating hero illustration -->
<img src="hero-visual.png" alt="" vl-effect="float" />
diff --git a/apps/docs/src/pages/hosts.astro b/apps/docs/src/pages/hosts.astro
index 20d0125..2c80aa6 100644
--- a/apps/docs/src/pages/hosts.astro
+++ b/apps/docs/src/pages/hosts.astro
@@ -1,43 +1,40 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
-
+Interoperability
-
Hosts (Tailwind & others)
+
Hosts (Tailwind, WordPress & others)
- Velora is a motion engine. Your host owns layout and visual styling.
+ Velora is a motion engine. Your host owns layout and visual styling — motion attributes still work.
- Velora uses @layer velora.*. Keep host utilities outside or after those layers so
- Tailwind wins on appearance while vl-* attributes still drive animation.
+ Same attributes in PHP templates, Gutenberg, or Elementor —
+ examples/wordpress/.
diff --git a/apps/docs/src/pages/index.astro b/apps/docs/src/pages/index.astro
index 661a47a..8b2cb6c 100644
--- a/apps/docs/src/pages/index.astro
+++ b/apps/docs/src/pages/index.astro
@@ -1,55 +1,87 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
+import { SITE, showcaseUrl } from "../lib/site";
---
-
+Documentation
Getting Started
A declarative motion language for HTML. Attributes describe intent; CSS executes it.
- Works with Tailwind, Relume, or any UI. Showcase is the optional Velora look
- (Skins — named models via data-editorial-theme).
- The public Showcase is six pages; the previous demos live in
- archive/showcase-2026-08/.
+ Every section below includes a Test here frame — scroll or interact on the page.
-
Installation
-
Install the package from the npm registry:
-
pnpm add @velora/css
-# or
-npm install @velora/css
+ Declarative motion'}
+ >
+
Declarative motion
+
+ Same public API as Showcase — test in the frame, copy into your project.
+
- Style with your own classes. Motion does not require .vl-card or brand tokens.
- See Hosts (Tailwind) and Scenes.
-
-
What Velora is
Motion language — not a utility framework requirement
-
Zero JS for animation — scroll timelines, view transitions, CSS only
-
Showcase — cinematic reference UI / design system skin
+
Zero animation runtime JavaScript — scroll timelines, view transitions, CSS only
+
Host-agnostic — motion-core without Skins
+
Skins — switch editorial theme in the header (Noir, Earth, Aethel, Meridian)
diff --git a/apps/docs/src/pages/motion-conditions.astro b/apps/docs/src/pages/motion-conditions.astro
index 2173c80..f3c76eb 100644
--- a/apps/docs/src/pages/motion-conditions.astro
+++ b/apps/docs/src/pages/motion-conditions.astro
@@ -1,5 +1,7 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
+import { SITE } from "../lib/site";
---
vl-motion — selects a motion mode for an
element and its subtree. It does not name a preset; instead it re-scales the shared engine tokens
that every preset already reads, so one attribute adapts timing, travel, depth, blur and easing
- across the whole subtree. Zero JavaScript.
+ across the whole subtree. Zero animation runtime JavaScript.
The Modes
- Add vl-motion to any element. Descendant vl-effect / vl-enter
+ Add vl-motion to any element. Descendant vl-enter / vl-scroll
reveals inherit the mode automatically.
@@ -49,10 +51,24 @@ import Base from "../layouts/Base.astro";
+
Test here — compare modes
+ …'}>
+
+
+
cinematic
+
Grand & deep
+
+
+
subtle
+
Quiet & fast
+
+
+
+
<!-- One attribute governs the whole subtree -->
<section vl-motion="cinematic">
<h2 vl-enter="reveal-cinematic" vl-timeline="view">Grand & deep</h2>
- <p vl-effect="fade-up" vl-timeline="view">Slower, deeper, blurred entrance.</p>
+ <p vl-enter="fade-up" vl-timeline="view">Slower, deeper, blurred entrance.</p>
</section>
<section vl-motion="subtle">...quieter, faster motion...</section>
@@ -144,6 +160,6 @@ import Base from "../layouts/Base.astro";
The vl-motion modes themselves work in all modern browsers. The if()-based
refinement requires a browser with CSS if() support; everywhere else the baseline modes
are used. See the live comparison on the
- Zero-JS Motion showcase page.
+ Zero-JS Motion showcase page.
diff --git a/apps/docs/src/pages/scenes.astro b/apps/docs/src/pages/scenes.astro
index 7f1bfca..b4c91f0 100644
--- a/apps/docs/src/pages/scenes.astro
+++ b/apps/docs/src/pages/scenes.astro
@@ -1,5 +1,6 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
@@ -7,52 +8,60 @@ import Base from "../layouts/Base.astro";
Scenes
- A scene is a shared clock for children — not a look. Layout and chrome come from the host UI
- (or optional Velora theme recipes).
+ A scene is a shared clock for children — not a look. Scroll the frame to scrub acts on the track.
Track — owns --vl-scene view-timeline and optional pin height
+
vl-scene
Track — owns --vl-scene and pin height
vl-stage
Sticky viewport stage (required for pin+scrub)
-
vl-timeline
view (scroll film) or auto (time film)
-
vl-pin
Track height in viewport multiples (e.g. 3)
+
vl-pin
Track height in viewport multiples
vl-scrub
Linear fill — progress glued to scroll
-
vl-act
Beat index (same act = overlap / GSAP <)
-
vl-span
How many beats the tween spans
-
vl-range
Escape hatch — overrides act-derived ranges
+
vl-act / vl-span
Beat index and duration on the clock
Why track ≠ stage
- A sticky element freezes its own anonymous view() progress. Children bind to the
- named track timeline (--vl-scene) while the stage stays pinned.
-
-
-
Named presets (skin recipes)
-
- Values like vl-scene="cinematic-hero" remain for compatibility. They ship in
- scene-recipes.css via @velora/css/theme / full — they mix look + motion.
- Prefer track/stage/acts for portable hosts.
+ Children bind to the named track timeline (--vl-scene) while
+ [vl-stage] stays pinned in the scrollport.
Channels on children
-
- Use existing channels on stage children: vl-enter, vl-scroll,
- vl-exit, etc. The scene clock drives when they play.
-
+
+
+
+
vl-enter
+
On stage child
+
+
+
vl-scroll
+
Scroll channel
+
+
+
diff --git a/apps/docs/src/pages/skills.astro b/apps/docs/src/pages/skills.astro
index 66ad0ae..1f49fd9 100644
--- a/apps/docs/src/pages/skills.astro
+++ b/apps/docs/src/pages/skills.astro
@@ -1,5 +1,6 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
@@ -7,18 +8,24 @@ import Base from "../layouts/Base.astro";
Agent Skill Sets
- These are project-specific operating profiles for AI coding agents — Cursor, GitHub Copilot, and
- similar tools. Each skill set defines a mission, scope, allowed and forbidden actions, and ideal
- prompts. Use them individually or in sequence.
+ Operating profiles for AI agents. Validate motion against live Test here frames
+ on Attributes, Effects, and Scenes.
+
+
+
No animation runtime JS
+
CSS-only motion in every public demo
+
+
+
Core Rule Shared by All Skill Sets
Semantic HTML first
Modern CSS as the primary rendering engine
-
Zero JavaScript for animation logic
+
Zero animation runtime JavaScript for motion logic
Minimal JavaScript only for progressive enhancement or accessibility where strictly needed
No React, Vue, GSAP, Framer Motion, Locomotive Scroll, Swup, or equivalent runtime in core
Strict namespace: .vl-*, --vl-*, vl-*
@@ -63,11 +70,11 @@ import Base from "../layouts/Base.astro";
Motion Systems Engineer
Builds and refines Velora's motion primitives and choreography system.
Allowed: add new motion presets, refactor motion declarations into variables/tokens, create scroll-linked CSS patterns, define primitive vs scene motion distinctions.
Forbidden: using JS to drive animations that modern CSS can handle, mixing scene orchestration into primitive effect definitions without need, introducing unregistered effect names casually.
Ideal prompt
-
Implement vl-effect="flow-in" and vl-timeline="view" using layered CSS only. No JS. Use tokenized values and reduced-motion support.
+
Implement vl-enter="flow-in" and vl-timeline="view" using layered CSS only. No animation runtime JS. Use tokenized values and reduced-motion support.
diff --git a/apps/docs/src/pages/timelines.astro b/apps/docs/src/pages/timelines.astro
index c789373..252f246 100644
--- a/apps/docs/src/pages/timelines.astro
+++ b/apps/docs/src/pages/timelines.astro
@@ -1,5 +1,6 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
@@ -7,44 +8,52 @@ import Base from "../layouts/Base.astro";
Timelines
- Timelines decide what drives progress. Effects decide what moves.
- The scene engine shares one clock across stage children.
+ Timelines decide what drives progress. Channels decide what moves.
+ Test each model in the frames below.
-
vl-timeline values
+
vl-timeline="view"
+
+
View progress
+
+ Linked to visibility in the scrollport
+
+
+
+
vl-timeline="auto"
+
+
Auto timeline
+
Time-based, no scroll needed
+
+
+
vl-timeline="hover"
+
+
+
Hover to play
+
Progress gated by intent
+
+
+
+
Scene clock + scrub
+
+
+
+
Shared clock
+
Scrub acts
+
+
+
+
+
Reference
Value
Behavior
-
view
Progress from element / scene visibility (view() or named --vl-scene)
-
scroll
Progress from root scroll
+
view
Element / scene visibility (view() or --vl-scene)
+
scroll
Root scroll progress
auto
Time-based CSS animation
-
hover
Paused until hover
+
hover
Paused until hover / focus
-
-
Scene clock
-
- On [vl-scene][vl-timeline="view"], stage children use
- animation-timeline: --vl-scene and ranges derived from
- vl-act / vl-span / --vl-beats (default 8).
-
-
- With vl-timeline="auto", the same acts map to
- animation-delay: (act - 1) * --vl-beat. Pin/scrub are no-ops.
-
-
-
Ranges
-
- Presets via vl-range (entry, entry-short, cover, …)
- still apply to standalone elements. Inside a pinned scene, prefer acts; use
- vl-range only as an escape hatch.
-
Velora's brand uses a natural, earthy palette built on hex values for precision:
@@ -279,7 +292,7 @@ import Base from "../layouts/Base.astro";
<!-- Override per element -->
<div
- vl-effect="fade-up"
+ vl-enter="fade-up"
vl-timeline="view"
style="--vl-motion-distance: 2rem; --vl-motion-duration: 600ms;">
Custom depth and speed
diff --git a/apps/docs/src/pages/transitions.astro b/apps/docs/src/pages/transitions.astro
index e56bad7..41533fd 100644
--- a/apps/docs/src/pages/transitions.astro
+++ b/apps/docs/src/pages/transitions.astro
@@ -1,5 +1,6 @@
---
import Base from "../layouts/Base.astro";
+import DocsLive from "../components/DocsLive.astro";
---
@@ -7,10 +8,27 @@ import Base from "../layouts/Base.astro";
Page Transitions
- Native cross-document View Transitions — no router, no JavaScript. Just CSS and the
- vl-page-transition attribute.
+ Native cross-document View Transitions — no animation runtime JavaScript. CSS and the
+ vl-page-transition attribute only.
+
Test here — page transitions
+
+
Cross-document demo
+
+ This site runs vl-page-transition on <html>.
+ Jump to Attributes or Effects to see the preset.
+
- Channel: enter. Type scale and reveal are engine; the font stack is a Skin. Copy from Catalog.
- See catalog.
+ Scroll this section — vl-enter="clip-rise" + vl-range tune the view window; vl-effect="gradient-text-color" on the hero word.
+ Catalog → enter.
@@ -691,8 +692,9 @@
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.
+ 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.