Orravo FX v3.0.0

What Orravo FX does

Drop a data-orv-fx="<module>" attribute on any element. The engine wires up the right behaviour. There are 22 built-in modules covering scroll-reveal, parallax, sticky-media scrollytelling, count-up, marquee, magnetic cursor, image compare, lazy Lottie, and 14 more. No jQuery. No GSAP. No build step.

Get it on your site

Standard WordPress plugin install. PHP 8.0+, WordPress 6.0+. No external services, no API keys.

Your first three modules

Open any post or page in Gutenberg, switch a paragraph block to the Code Editor view, and paste this. Save, view the page, scroll.

html<h2 data-orv-fx="text-split" data-orv-ts-by="word" data-orv-ts-stagger="80">Each word lands in turn.</h2>

<p data-orv-fx="scroll-reveal">This paragraph fades and slides up as it enters the viewport.</p>

<div data-orv-fx="count-up">
  We have shipped <span data-orv-cu-to="14820">0</span> events this season.
</div>

Scroll Reveal

Fades and slides children into view as the host enters the viewport. Optional per-child stagger.

html<div data-orv-fx="scroll-reveal" data-orv-sr-stagger="2">
  <h2>Lead</h2>
  <p>Each child fades in 120ms after the previous one.</p>
  <a href="/cta">Read the case study</a>
</div>

Reveal Blur

Same trigger as Scroll Reveal, with a frosted-glass filter:blur drop. Use sparingly; blur is a compositing op.

html<h1 data-orv-fx="reveal-blur">Hero appears from a blur</h1>

Sticky Media

Apple-style scrollytelling. A pinned media slot crossfades as panels enter view.

SVG Line Draw

Animates SVG strokes from undrawn to drawn when the element scrolls into view. Uses stroke-dasharray + stroke-dashoffset.

html<div data-orv-fx="svg-line-draw" data-orv-sld-dur="1400">
  <svg viewBox="0 0 100 100">
    <path d="M10 50 Q50 10 90 50 T170 50" stroke="#000" fill="none" stroke-width="2"/>
  </svg>
</div>

Parallax Layers

Multi-speed layered parallax inside a container. rAF-throttled. Speeds expressed in vh per scroll unit.

Particles Background

Lightweight canvas particle field that fills the host. Pauses when off-screen.

Hover Glow

Cursor-following spotlight gradient inside the host. Updates two CSS variables on mousemove. No canvas, no rAF.

html<div data-orv-fx="hover-glow" data-orv-hg-color="rgba(255,106,43,.4)" data-orv-hg-radius="320">
  Hover me
</div>

Count Up

Numeric counters animate from zero on first viewport entry. Suffixes preserved (%, $, K, M).

Text Split

Wraps text in per-word or per-letter spans and reveals them on scroll with a stagger.

html<h2 data-orv-fx="text-split" data-orv-ts-by="word" data-orv-ts-stagger="80">
  Hello kinetic web
</h2>

Kinetic Typography

Headlines scale based on viewport position: largest at the centre, smallest at the edges.

Text Shimmer

A soft highlight loops across the text via background-clip:text. Pairs well with kinetic typography for hero blocks.

Text Cycle

Rotates through child elements at an interval, fading between them. Great for "We make X. We make Y." hero patterns.

html<span data-orv-fx="text-cycle" data-orv-tc-dur="2400">
  <span>fast</span>
  <span>simple</span>
  <span>quiet</span>
</span>

Magnetic Cursor

Element drifts toward the cursor when nearby. Opt-in via dedicated attribute. No-op on touch devices.

Tilt

Pointer-tracked 3D card tilt. Configurable max rotation and perspective.

Cursor Trail

A small eased dot follows the cursor inside the host element. Pointer-only; no-ops on touch.

Marquee + Rich Marquee

Infinitely scrolling text or logo strip. Pauses on hover and on focus. Speed is set via the --orv-fx-mq-speed custom property. Rich Marquee adds an edge-fade mask and auto-cloning.

html<div data-orv-fx="marquee" style="--orv-fx-mq-speed:30s">
  <div class="orv-fx-mq__track">
    <span>Free shipping</span>
    <span>30-day returns</span>
    <span>Made in Lagos</span>
  </div>
</div>

Image Compare

Before/after slider with a keyboard-accessible drag handle. Arrow keys move the divider; Home and End jump to extremes.

Lazy Lottie

Lazy-loads lottie-web from a CDN only when the host scrolls into view. Zero cost on pages that do not use the module.

Confetti Burst

DOM-particle confetti on click, on scroll, or via programmatic trigger.

Section Anchors

Smooth-scrolls in-page anchor links inside the host with a configurable header offset, then writes the hash to the URL.

html<nav data-orv-fx="section-anchors" data-orv-sa-offset="-80">
  <a href="#chapter-1">Chapter 1</a>
  <a href="#chapter-2">Chapter 2</a>
</nav>

Page Transitions

Fades the page on first paint and on internal-link clicks. Uses the View Transitions API where supported, falls back to an opacity fade.

Focus Trail

A traveling outline that follows keyboard focus through descendants of the host. Helps keyboard users keep their place.

prefers-reduced-motion handling

The engine reads the OS-level prefers-reduced-motion setting on boot. Modules respond in one of two ways: full skip (parallax, marquee, particles, kinetic) or fade-only fallback (scroll-reveal, text-split, sticky-media).

You can override per site in Settings. Set reduced_motion_override to auto (respect OS), force-on (suppress all motion regardless of OS), or force-off (always animate, ignore OS). Default is auto.

Performance notes

Bundle size, GPU usage, and the rules the engine follows to stay invisible.

• Bundle size: lite build is ~8KB gzipped, full build is ~14KB. Conditional load (Settings) drops the engine entirely on pages that do not use it.
• GPU transforms only: all motion uses transform and opacity. No animating top, left, width, or height.
• IntersectionObserver: no scroll listeners on window. Hosts that scroll off-screen pause their work.
• requestAnimationFrame throttling: parallax, count-up, and tilt all batch updates to a single rAF tick per frame.
• Tab-hidden pause: the engine listens for visibilitychange and pauses canvas-based modules (particles, cursor trail) when the tab is backgrounded.
• Loading strategy: Settings → loading_strategy = monolithic (one engine.js) or per-module (each module is its own lazy chunk fetched on first match).

Custom events

The engine emits four custom events on window or on the element. Wire them to analytics, error reporting, or your test harness.

jswindow.addEventListener('orv-fx:ready', () => {
  console.log('[orv-fx] booted, first scan complete');
});

document.addEventListener('orv-fx:module-init', (ev) => {
  const { module, el } = ev.detail;
  sendBeacon('/track/fx-init', { module, path: location.pathname });
}, true);

window.addEventListener('orv-fx:module-load-failed', (ev) => {
  console.error('[orv-fx] module 404', ev.detail);
});

Settings reference

Every key in the orravo_fx_settings option, with its default and what it does.

Frequently asked

Changelog