Text Motion Pack

Motion for all

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. Main Features 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 Technical Details 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

Motion for all