A single code component with 37 built-in text animations — from simple fades to glitch, scramble, liquid distortion, and 3D warps. Pick a preset, tune it with one Intensity slider, and it's on your page. No third-party scripts, no manual keyframes — text stays real, selectable, and accessible the whole time.
37 presets across 8 families — movement, softness, reveal, scale, rotation, sequencing, signature, and extravagant effects
One-slider tuning — Intensity scales the whole animation up or down without touching individual values
6 triggers — animate on view, on scroll, on mount, on hover, in a loop, or when a section enters view
Custom mode — 20+ raw parameters unlocked for full manual control when a preset isn't quite right
Typography flexible — inherits your canvas font and color by default, or set your own
Stack
React + Framer Motion for the animation engine
Native SVG filters (feTurbulence + feDisplacementMap) for liquid, dissolve, and melt
Animated CSS filters (blur, brightness, drop-shadow) for chroma, shine, and neon
requestAnimationFrame driving scramble, type, and turbulence effects frame-by-frame
Preset families
Family Presets Movement fade, rise, drop, slide Softness split, blur, focus Reveal mask, curtain, unfold, wipe, roll Scale pop, punch, zoom, shrink, stretch Rotation flip, swivel, tilt, spin, shear Sequencing glitch, wave, cascade, scatter Signature scramble, type, liquid, dissolve, chroma, shine, neon Extravagant explode, vortex, warp, melt
Controls
Text, Preset, Trigger, Delay, Threshold, Replay, Loop Gap
Per-preset: Intensity, Duration, Stagger (+ Detail/Settle for turbulence presets)
Custom: Effect, Easing, Split By, Order, Origin, Amount, Chaos, Depth, Distance X/Y, Blur, Scale/ScaleX/ScaleY, Rotate, Flip X/Y, Skew, Start Opacity, Mask
Typography: Color, Own Font toggle + Font picker
Demo Panel: Auto Play, Auto Interval, Position, Align, Dot Size, Dot Gap, Panel Spacing, Panel Color, Inactive Opacity
A single code component with 37 built-in text animations — from simple fades to glitch, scramble, liquid distortion, and 3D warps. Pick a preset, tune it with one Intensity slider, and it's on your page. No third-party scripts, no manual keyframes — text stays real, selectable, and accessible the whole time.
37 presets across 8 families — movement, softness, reveal, scale, rotation, sequencing, signature, and extravagant effects
One-slider tuning — Intensity scales the whole animation up or down without touching individual values
6 triggers — animate on view, on scroll, on mount, on hover, in a loop, or when a section enters view
Custom mode — 20+ raw parameters unlocked for full manual control when a preset isn't quite right
Typography flexible — inherits your canvas font and color by default, or set your own
Stack
React + Framer Motion for the animation engine
Native SVG filters (feTurbulence + feDisplacementMap) for liquid, dissolve, and melt
Animated CSS filters (blur, brightness, drop-shadow) for chroma, shine, and neon
requestAnimationFrame driving scramble, type, and turbulence effects frame-by-frame
Preset families
Family Presets Movement fade, rise, drop, slide Softness split, blur, focus Reveal mask, curtain, unfold, wipe, roll Scale pop, punch, zoom, shrink, stretch Rotation flip, swivel, tilt, spin, shear Sequencing glitch, wave, cascade, scatter Signature scramble, type, liquid, dissolve, chroma, shine, neon Extravagant explode, vortex, warp, melt
Controls
Text, Preset, Trigger, Delay, Threshold, Replay, Loop Gap
Per-preset: Intensity, Duration, Stagger (+ Detail/Settle for turbulence presets)
Custom: Effect, Easing, Split By, Order, Origin, Amount, Chaos, Depth, Distance X/Y, Blur, Scale/ScaleX/ScaleY, Rotate, Flip X/Y, Skew, Start Opacity, Mask
Typography: Color, Own Font toggle + Font picker
Demo Panel: Auto Play, Auto Interval, Position, Align, Dot Size, Dot Gap, Panel Spacing, Panel Color, Inactive Opacity
