data-text-effects

Declarative text effects using data attributes. Gradient, shimmer, glitch, reveal, blur-reveal, highlight, typewriter, and scramble effects that work on any text element.

data-gradient-text

CSS-only gradient coloring with theme-aware defaults and preset palettes. Add data-gradient-text-animate for a flowing animation.

<h1 data-gradient-text>Theme-aware gradient</h1> <h2 data-gradient-text="sunset">Warm Sunset</h2> <h2 data-gradient-text="ocean">Cool Ocean</h2> <h2 data-gradient-text="forest">Deep Forest</h2> <h2 data-gradient-text="neon">Electric Neon</h2> <h1 data-gradient-text data-gradient-text-animate>Flowing gradient</h1>

Attributes

AttributeValuesDescription
data-gradient-text"", "sunset", "ocean", "forest", "neon"Gradient preset. Empty uses theme primary→secondary.
data-gradient-text-animatebooleanEnable flowing gradient animation.

data-shimmer

CSS-only shimmering highlight that sweeps across the text. A single bright hotspot slides through the text on a loop.

<span data-shimmer>Shimmering text</span> <h1 data-shimmer="slow">Slow shimmer</h1> <h2 data-shimmer="fast">Fast shimmer</h2>

Attributes

AttributeValuesDescription
data-shimmer"", "slow", "fast"Speed preset. Default is 2s cycle.

data-glitch

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.

<h1 data-glitch>Glitch Effect</h1> <h1 data-glitch="hover">Glitch on Hover Only</h1>

Attributes

AttributeValuesDescription
data-glitch"", "hover"Always-on or hover-triggered.

data-reveal

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

<h1 data-reveal>Word-by-word entrance</h1> <p data-reveal="line">Line-by-line reveal</p> <h2 data-reveal data-reveal-delay="120">Custom stagger</h2>

Attributes

AttributeValuesDescription
data-reveal"", "word", "line"Split mode. Default is word.
data-reveal-delaymsStagger delay between chunks (default 80).
data-reveal-durationmsAnimation duration per chunk (default 400).

data-blur-reveal

Like data-reveal but words start blurred and transition to clear instead of sliding up. Creates a dreamy, focus-pull effect.

<h1 data-blur-reveal>Text unblurs word by word</h1> <p data-blur-reveal="line">Line-by-line unblur</p>

Attributes

AttributeValuesDescription
data-blur-reveal"", "word", "line"Split mode. Default is word.
data-blur-reveal-delaymsStagger delay between chunks (default 80).

data-highlight

Animated underline, box fill, or circle highlight that draws in when scrolled into view. Perfect for emphasizing key phrases.

<span data-highlight>Underline draws in</span> <mark data-highlight="box">Marker highlight</mark> <span data-highlight="circle">Circled</span> <span data-highlight data-highlight-color="var(--color-error)">Red underline</span>

Attributes

AttributeValuesDescription
data-highlight"", "underline", "box", "circle"Highlight style. Default is underline.
data-highlight-colorCSS colorOverride color (default: currentColor).

data-typewriter

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

<h1 data-typewriter>Hello, World!</h1> <p data-typewriter="80" data-typewriter-delay="500">Slower typing</p> <span data-typewriter data-typewriter-loop="2000">Loops forever</span> <h2 data-typewriter data-typewriter-cursor="none">No cursor</h2>

Attributes

AttributeValuesDescription
data-typewriterms per characterTyping speed. Default is 50ms.
data-typewriter-delaymsInitial delay before typing starts (default 0).
data-typewriter-cursor"", "none"Show or hide the blinking cursor.
data-typewriter-loopmsPause before looping. Omit for one-shot.

data-scramble

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

<h1 data-scramble>Decoding the future</h1> <h2 data-scramble="2500" data-scramble-chars="01">Binary decode</h2>

Attributes

AttributeValuesDescription
data-scramblemsTotal duration. Default is 1500ms.
data-scramble-charsstringCharacter set for random chars (default: !<>-_\\/[]{}=+*^?#).
data-scramble-speedmsFrame interval. Default is 30ms.

Shared Behavior

Progressive Enhancement

All effects are progressive enhancements. Text is fully readable without JavaScript. CSS-only effects (data-gradient-text, data-shimmer) need no JS at all.

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

JS effects use IntersectionObserver with threshold: 0.1 to trigger when scrolled into view. Effects play once (except data-typewriter with data-typewriter-loop).

Dynamic Elements

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

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