About

Text animation converts static strings into temporal sequences where each character c_i receives a computed delay d_i = i × Δt. Getting timing wrong produces jittery, unreadable output that damages user perception within the first 200ms of exposure. This tool implements 15 distinct animation algorithms - from cubic-bezier eased fades to per-character trigonometric wave displacement - each parameterized by speed, direction, and iteration count. It renders in real-time DOM with hardware-accelerated CSS transforms.

The tool approximates continuous motion through discrete frame steps at 60fps. Particle effects use Euler integration with linear drag coefficient k = 0.98. Note: animations using sin-based displacement may produce visual aliasing on low-DPI screens below 96dpi. Pro Tip: keep animated strings under 80 characters for optimal readability during motion.

Formulas

Each character c_i in a string of length n receives an animation delay computed as:

delay_i = i × baseDurationspeed

Wave displacement uses a sinusoidal function applied per-frame at time t:

y_i(t) = A × sin(2π × f × t + i × φ)

Rainbow color cycling maps character index to hue angle:

h_i(t) = (in × 360 + t × rate) mod 360

Particle physics applies Euler integration with drag per frame:

v_t+1 = v_t × k + g

Where A = amplitude in pixels, f = frequency in Hz, φ = phase offset per character, k = drag coefficient (0.98), g = gravity vector, speed = user multiplier (0.5 - 3.0), rate = hue rotation speed in °/frame.

Reference Data

Animation	Transform Property	Easing	Per-Char Delay	Best For
Typewriter	opacity	step-end	80ms	Headings, terminals
Fade In Up	opacity, translateY	ease-out	50ms	Hero sections
Fade In Down	opacity, translateY	ease-out	50ms	Subtitles
Bounce In	opacity, scale	cubic-bezier(0.68,-0.55,0.27,1.55)	60ms	Playful UI
Scale Up	scale, opacity	ease-out	40ms	Emphasis text
Rotate In	rotateX, opacity	ease-out	55ms	3D feel headers
Slide Left	translateX, opacity	ease-out	45ms	Navigation items
Slide Right	translateX, opacity	ease-out	45ms	List entries
Wave	translateY via sin	continuous	100ms phase	Looping banners
Glitch	translateX, skewX, clip	random steps	70ms	Cyberpunk, gaming
Rainbow	color HSL cycle	linear	30ms phase	Creative, kids
Blur Reveal	filter: blur, opacity	ease-in-out	60ms	Cinematic reveals
Elastic	scaleX	cubic-bezier(0.68,-0.6,0.32,1.6)	65ms	Attention-grabbing
Drop In	translateY, opacity	bounce	70ms	Game scores
Flip In	rotateY, opacity	ease-out	55ms	Card reveals
Matrix Rain	opacity, random chars	step-start	40ms	Hacker aesthetic

Frequently Asked Questions

Mobile GPUs prioritize battery over rendering throughput. Animations using filter: blur or box-shadow trigger full-layer repaint rather than compositor-only updates. This tool uses transform and opacity exclusively for per-character motion, which stays on the GPU compositor thread. If you still see jank, reduce character count below 40 or increase the speed multiplier to shorten total animation duration.

Total visible duration equals n × delay + charAnimDuration. For a 50-character string at 50ms delay with 400ms character transition, total runtime is 2900ms. The speed slider inversely scales the base delay, so at 2× speed, the same string completes in 1650ms.

Continuous animations like Wave and Rainbow use requestAnimationFrame loops. This tool cancels the previous frame ID before starting a new cycle and nullifies references on re-trigger. However, if you embed the exported CSS in a page with hundreds of animated elements, each running independent keyframe instances, compositor memory can grow. Keep looping animations to under 20 simultaneous elements.

Glitch applies random translateX offsets between −3 and 3px plus skewX distortion at random intervals, with clip-path slicing to simulate CRT artifacts. Matrix Rain replaces each character with random Unicode characters from the Katakana block (U+30A0 - U+30FF) at staggered intervals, converging to the target character after n iterations. Glitch distorts geometry; Matrix Rain distorts content.

The elastic easing uses a cubic-bezier approximation with overshooting control points: cubic-bezier(0.68, −0.6, 0.32, 1.6). The negative second value pulls the element backward before the forward motion, and the value exceeding 1.0 in the fourth parameter pushes it past the target before settling. This creates the characteristic spring-like overshoot without requiring JavaScript spring physics.

When prefers-reduced-motion: reduce is active, this tool replaces all transform-based character animations with a single whole-text opacity fade lasting 300ms. Continuous loops (Wave, Rainbow) are paused after one cycle. The user sees the final state without motion, satisfying WCAG 2.1 Success Criterion 2.3.3.