Blend Text

Blend Text is a multi-layer text component that adds depth, motion, and gradient blending to your typography.

Built with performance and accessibility in mind, it adapts to different devices and motion preferences automatically so your animations stay smooth, safe, and consistent across browsers.

What it does

• Creates layered 3D-style text with solid, outline, or hybrid render modes

• Supports gradient blending across layers, with invert and direction control

• Animates by scroll position or mouse movement (with smooth easing feels)

• Includes motion-safe defaults (Smart Calm, Elastic Snap, Cinematic Drift)

• Works across browsers with text stroke fallbacks for Firefox/Safari

• Respects Reduced Motion and High Contrast settings

Why it’s useful

• Adds impact to hero headlines and landing pages

• Creates motion-rich typography without coding

• Keeps accessibility and performance in check, even on lower-end devices

• Simple to set up: drop in your text, pick a style, and go

Highlights

• Adaptive Quality — detects device power, adjusts layer counts

• Performance — RAF-based animation, virtualization for heavy text

• Accessibility — full ARIA support, motion and contrast safe

• Cross-Browser — stroke fallback for consistent rendering

Key Features

• Layered depth - multi-copy text with customizable distance and direction

• Gradient blending - smooth color transitions across layers

• Style - solid fill, outline, or both together

• Interaction type - Static, scroll, or follow mouse

• Motion feels - Instant, Bouncy & Smooth

• Device-aware - adjusts quality for low-end devices

• Accessibility - reduced-motion and high-contrast support

• Cross-browser - webkit stroke and shadow fallbacks

• Performance-ready - optimized rendering, virtualization above 20+ steps

Suggested Use Cases

• Hero headlines with layered depth

• Landing page titles with interactive motion

• Portfolio typography that feels alive

• Scroll-animated editorial text reveals

• Marketing sites needing cinematic or playful motion