Motion Effects

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.

How channels work

vl-enter="fade-up" vl-timeline="view"

Pick the channel that owns the behavior, then add vl-timeline when you need a progress model:

<!-- Entrance (preferred) -->
<h1 vl-enter="fade-up">Heading</h1>

<!-- Viewport-gated enter -->
<div vl-in-view>
  <p vl-enter="fade-up" vl-timeline="view">Content</p>
</div>

<!-- Scroll-linked -->
<img vl-scroll="media-zoom" vl-timeline="view" alt="" />

<!-- Legacy composite (avoid for new work) -->
<div vl-effect="blur-in" vl-timeline="view">…</div>

Entrance presets (vl-enter)

26 presets from the generated catalog (Oct 18, 2026). Prefer channels for new markup — not legacy vl-effect.

Affect the element itself. Best combined with vl-timeline="view" for scroll-driven reveals.

CSS Variable Hooks (Entrance)

<div
  vl-effect="fade-up"
  style="
    --vl-motion-duration: 600ms;   /* override speed */
    --vl-motion-distance: 2rem;    /* override travel distance */
    --vl-motion-ease: var(--vl-ease-spring); /* override easing */
  ">
  Custom entrance
</div>

Live Demo — entrance

vl-enter="fade-up|blur-in|reveal-3d" vl-timeline="view"

Interaction presets (vl-hover)

Applied via vl-hover on interactive elements — no timeline needed.7 presets in the generated catalog.

vl-hover="hover-lift"

<!-- hover-lift on a card -->
<div class="vl-card" vl-effect="hover-lift">
  Hover me
</div>

<!-- underline-expand on a nav link -->
<a href="/about" vl-effect="underline-expand">About</a>

<!-- icon-shift on a CTA -->
<a href="/docs" vl-effect="icon-shift">
  Read the docs
  <svg aria-hidden="true"><!-- arrow icon --></svg>
</a>

Touch devices: Hover effects automatically disable via @media (hover: none).

Scroll presets (vl-scroll)

Scroll-linked transforms. 19 presets — usually paired with vl-timeline="view" unless the preset is inherently scroll-driven.

Loop presets (vl-loop / vl-loop-effect)

Continuous ambient motion. 0 presets — loops stop under prefers-reduced-motion.

State Effects

Used with toggled elements like accordions, drawers, and panels. Typically paired with[open], a class toggle, or :checked:

<!-- Use the .vl-accordion component for a complete implementation -->
<details class="vl-accordion">
  <summary>Question</summary>
  <div class="vl-accordion__content">Answer text</div>
</details>

Continuous / Ambient Effects

See the generated loop preset table above. Examples below use legacy vl-effect — prefer vl-loop / vl-loop-effect for new markup.

<!-- Floating hero illustration -->
<img src="hero-visual.png" alt="" vl-effect="float" />

<!-- Breathing glow on a live badge -->
<span class="vl-badge" vl-effect="glow-breathe">Live</span>

<!-- Shimmer skeleton -->
<div
  vl-effect="shimmer"
  style="
    height: 1rem;
    border-radius: var(--vl-radius-md);
    background: linear-gradient(
      90deg,
      var(--vl-bg-surface-elevated) 0%,
      var(--vl-bg-surface) 50%,
      var(--vl-bg-surface-elevated) 100%
    );
    background-size: 200% auto;
  ">
</div>

Text Reveal Effects

Clip-path-based reveals designed for headlines. Apply to heading elements for editorial impact.

<h1 vl-effect="text-reveal-up" vl-timeline="view">
  Premium interfaces start here
</h1>

Cinema / Scroll Effects

These effects use animation-timeline: view(block) internally. They are inherently scroll-driven and do not need vl-timeline="view" added separately.

<!-- Cinema zoom on a hero image -->
<img src="hero.jpg" alt="Hero" vl-effect="cinema-zoom" />

<!-- Parallax section background -->
<div vl-effect="parallax">
  <img src="bg.jpg" alt="" />
</div>

<!-- Typewriter with custom timing -->
<p
  vl-effect="typewriter"
  style="--vl-type-duration: 3s; --vl-type-steps: 40;">
  Building the future of motion design.
</p>

Speed Modifier

Override the animation duration category with vl-speed:

<div vl-effect="fade-up" vl-speed="fast">Quick reveal</div>
<div vl-effect="flow-in" vl-speed="slow">Slow dramatic reveal</div>

Depth Modifier

Control the translation distance with vl-depth:

<div vl-effect="fade-up" vl-depth="1">Subtle — 0.75rem travel</div>
<div vl-effect="fade-up" vl-depth="4">Dramatic — 4rem travel</div>

Accessibility

All vl-effect animations automatically disable via:

@media (prefers-reduced-motion: reduce) {
  [vl-effect] {
    animation: none !important;
  }
}

Interaction effects (hover-lift, hover-glow) also disable on touch devices via @media (hover: none).

Browser Support

Entrance, interaction, state, and continuous effects work in all modern browsers (Chrome 89+, Firefox 90+, Safari 15+).

Scroll-driven effects (cinema-zoom, parallax, vl-timeline="view") require Chrome 115+ / Edge 115+. A graceful fallback is included via@supports not (animation-timeline: view(block)) — these elements simply appear in their final state on unsupported browsers.