About Text Motion Pack

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