data-effect

Unified Effect System

The data-effect attribute is the single entry point for all visual effects in Vanilla Breeze. Instead of separate data-blink, data-glitch, data-shimmer attributes, every effect is activated through one unified attribute.

How it works

Multiple effects

Apply multiple effects to a single element with space-separated values:

data-effect="blink" retro

Text flashes on and off with a step animation, toggling between full and 50% opacity.

data-effect="blur-reveal" effects

Words start blurred and transition to clear instead of sliding up. Creates a dreamy, focus-pull effect. Triggers on scroll.

data-effect="bounce"

Continuous vertical bounce animation. The element bounces up and down in a rhythmic loop. The kawaii pack overrides this with a spring-loaded hover-only variant when loaded.

data-effect="collapse"

Height-to-zero exit animation. The element collapses vertically while fading out, then stays hidden. Useful for dismissible alerts, list item removal, or accordion-style closing.

data-effect="fade-in"

Simple opacity fade entrance. Element transitions from transparent to fully visible. Commonly used with data-trigger="scroll" for scroll-triggered reveals.

data-effect="fade-out"

Opacity fade exit. Element transitions from visible to transparent. Use with data-trigger="click" or data-trigger="time:n".

data-effect="flipboard" retro

Split-flap departure board effect. Each character sits in a dark cell with a horizontal hinge and cycles through random letters before settling on the target. Requires JS.

data-effect="float"

Gentle vertical floating animation. The element bobs up and down in a smooth loop, creating a weightless or hovering appearance.

data-effect="glitch" effects

Chromatic aberration glitch with cyan/red channel splitting via CSS pseudo-elements. Tiny JS sets a data-glitch-text attribute for the pseudo-element content.

data-effect="gradient-text"

CSS-only gradient coloring with theme-aware defaults and preset palettes. Add class="animate" for a flowing animation.

data-effect="glow"

Pulsing drop-shadow glow that alternates between a subtle and intense luminance. Uses filter: drop-shadow() with color-mix() for smooth color transitions. Defaults to the theme's primary color.

data-effect="hard-shadow" retro

Hard-edged offset text shadows with no blur. Choose single, double, or long trailing shadows with optional color presets. Sets font-weight: 900.

data-effect="highlight"

Animated underline, box fill, or circle highlight that draws in when scrolled into view.

data-effect="marquee" retro

Continuously scrolling horizontal content with edge masking. Children animate left (or right with class="reverse") in an infinite loop.

data-effect="neon" retro

Glowing neon text with a pulsing text-shadow halo that breathes in and out over 2.5 seconds.

data-effect="outline" retro

Hollow outlined text with transparent fill using -webkit-text-stroke. Gracefully skipped via @supports.

data-effect="particles" kawaii

JS-driven floating particle effect. Spawns emoji characters (✦ ✧ ⋆ ♡ ☆) that float upward and fade out. Requires JS.

data-effect="pop"

Quick scale-up pop animation. The element rapidly scales from small to full size with a slight overshoot, creating a punchy entrance or interaction response.

data-effect="pulse"

Rhythmic scale pulse that grows and shrinks in a continuous loop. Useful for drawing attention to call-to-action elements.

data-effect="rainbow" retro

Continuous hue-rotation filter that cycles through the full color spectrum.

data-effect="reveal"

Word-by-word or line-by-line entrance animation. Text slides up and fades in with staggered timing when scrolled into view.

data-effect="scramble" effects

Characters resolve left-to-right from random symbols. Think Hollywood decryption or sci-fi terminal output. Triggers on scroll.

data-effect="shadow"

Elevated box-shadow decoration with a subtle lift animation. The element rises slightly and gains depth, transitioning from a light shadow to a more pronounced elevated shadow. Ideal for cards, panels, and call-to-action containers.

data-effect="shake"

Rapid horizontal shaking animation. Useful for error states, attention-grabbing, or playful interactions. Runs continuously or on hover.

data-effect="shimmer"

CSS-only shimmering highlight that sweeps across the text on a loop.

data-effect="slide-in"

Horizontal entrance animation that respects text direction. In LTR, the element slides in from the left; in RTL, from the right. Uses :where([dir="rtl"]) for automatic direction support.

data-effect="slide-out"

Horizontal exit animation. The element slides out in the inline-end direction while fading. Mirrors slide-in with reversed direction and RTL support via :where([dir="rtl"]).

data-effect="slide-up"

Element slides upward into its final position while fading in. A clean, modern entrance animation commonly paired with scroll triggering.

data-effect="sparkle" kawaii

CSS-only floating sparkle stars. Two ✦ characters orbit the element with staggered float animations — one gold at top-right, one lavender at bottom-left.

data-effect="stamp" retro

Rubber stamp effect with fractal noise SVG filter, rotation, and mix-blend-mode: multiply. Requires JS for the SVG filter injection.

data-effect="starburst" kawaii

Animated pastel starburst gradient background with rotating 10-degree conic-gradient rays and soft radial bokeh at the bottom.

data-effect="text-3d" retro

Bold text with layered drop-shadows creating a 3D extrusion effect. Sets font-weight: 900.

data-effect="typewriter" effects

Classic character-by-character typing with optional blinking cursor and looping. Triggers when scrolled into view.

data-effect="wiggle" kawaii

Playful left-right rotation wobble. Runs continuously by default, or only on hover.

data-effect="ticker" effects

Animated number count-up on <data> elements. Counts from a start value to the element's value attribute using easeOutExpo easing — fast start, decelerating finish. Pairs with data-format-number for locale-aware formatting during animation.

Attributes

CSS Properties

How It Works

1. The scroll trigger watches for the element to enter the viewport (10% threshold)
2. A requestAnimationFrame loop animates from start to end value at 60fps
3. Each frame applies easeOutExpo easing for a fast-start, decelerating finish
4. Intermediate values are formatted with Intl.NumberFormat matching any data-format-number options
5. At completion, sets data-format-number-init to prevent double-formatting

With Format Number

Combine with data-format-number for locale-aware formatting during the animation:

Stats Pattern

The ticker pairs naturally with the Stats pattern:

Reduced Motion

The ticker checks prefers-reduced-motion: reduce and :root[data-motion-reduced]. When either is true, the animation is skipped entirely — the original text content is preserved as-is. data-format-number still formats normally.

Easing

See also: data element for byte formatting and locale overrides.

Shared Behavior

Progressive Enhancement

All effects are progressive enhancements. Text is fully readable without JavaScript. CSS-only effects need no JS at all. Effects without a pack badge are in core.

Reduced Motion

All effects respect prefers-reduced-motion: reduce and :root[data-motion-reduced]. When reduced motion is active, text displays immediately with no animation.

Screen Readers

JS effects that split text into spans set aria-label on the host element so screen readers announce the full text naturally.

Scroll Trigger

Effects with data-trigger="scroll" use IntersectionObserver with threshold: 0.1 to trigger when scrolled into view. Effects play once (except data-effect="typewriter" with class="loop").

Dynamic Elements

A MutationObserver watches for dynamically added elements, so effects work with client-side rendering and lazy loading.

CSS Layer

Core effects use @layer web-components. Pack effects use @layer bundle-effects.

Accessibility

• aria-label preserves full text for screen readers
• prefers-reduced-motion respected by all effects
• CSS-only effects degrade gracefully in older browsers via @supports
• No content is hidden permanently — text is always accessible
• Guard attributes (data-*-init) prevent double initialization