About

Static text fails to capture attention in digital communication. This tool renders animated typography on an HTML5 Canvas using parametric easing functions and per-character transform matrices. Each character receives independent x, y, θ, α, and s values driven by time-dependent equations. The particle system uses Euler integration with configurable gravity g and initial velocity v₀ to generate confetti, sparkle, and firework effects. Color cycling interpolates through HSL space at a rate of ω degrees per frame with a phase offset φ per character index, producing rainbow and gradient sweeps. All rendering runs at 60 fps inside a single requestAnimationFrame loop.

Export captures canvas frames via the MediaRecorder API into a WebM container. The tool assumes a constant frame rate and does not compensate for dropped frames during recording. Pro tip: keep message length under 80 characters for readable animations at smaller canvas sizes. Particle-heavy presets on low-end mobile GPUs may drop below 30 fps. The reduced-motion preference is respected: if enabled, the tool renders a static styled message instead.

Formulas

Each character at index i is positioned using base coordinates plus time-dependent offsets. The wave animation applies a vertical displacement:

y_i(t) = y₀ + A ⋅ sin(2πft + φ ⋅ i)

where A = amplitude in pixels, f = frequency in Hz, t = elapsed time in seconds, φ = phase offset per character index, and y₀ = baseline vertical position.

The elastic easing function used for bounce animations follows:

e(t) = 2^−10t ⋅ sin((t − 0.075) ⋅ 2π0.3) + 1

where t ∈ [0, 1] is the normalized progress. The exponential decay 2^−10t controls the damping envelope.

Particle positions update via Euler integration each frame:

v_y(t + dt) = v_y(t) + g ⋅ dt

p(t + dt) = p(t) + v(t) ⋅ dt

where g = gravitational acceleration in px/s², dt = frame delta time, v = velocity vector, and p = position vector. Particles are recycled when their lifetime τ expires or they leave the canvas bounds.

Rainbow color per character:

h_i = (h₀ + i ⋅ Δh + t ⋅ ω) mod 360

where h₀ = base hue, Δh = hue spread per character in degrees, and ω = angular velocity of the color cycle in °/s.

Reference Data

Animation Type	Algorithm	Parameters	Visual Effect	Performance Cost
Typewriter	Sequential reveal with delay d	Speed: 20 - 200 ms/char	Characters appear one by one with cursor blink	Low
Wave	y = A ⋅ sin(ωt + φi)	Amplitude: 5 - 40 px, Frequency: 0.5 - 5 Hz	Characters oscillate vertically in sine wave	Low
Bounce In	Elastic easing per character with stagger	Stagger: 30 - 150 ms, Overshoot: 1.2 - 2.0	Characters drop from above and bounce into place	Low
Fade In	Alpha interpolation α(t) with stagger	Duration: 200 - 1500 ms	Characters fade from transparent to opaque	Low
Spiral In	Polar to Cartesian: r(t) → 0	Radius: 50 - 300 px, Spin: 1 - 4 turns	Characters spiral inward from random angles	Medium
Rainbow Cycle	HSL hue rotation: h = (h₀ + i ⋅ s + t ⋅ ω) mod 360	Spread: 5 - 30 °/char	Continuous color flow across text	Low
Shake	Random offset: Δx, Δy ∈ [−A, A]	Intensity: 1 - 10 px	Text vibrates rapidly in place	Low
Glitch	Random slice offset + RGB channel split	Frequency: 2 - 15 Hz, Split: 1 - 8 px	Digital distortion flicker effect	Medium
Zoom Pulse	Scale: s(t) = 1 + A ⋅ sin(ωt)	Amplitude: 0.05 - 0.3	Text breathes in and out rhythmically	Low
Sparkle Particles	Euler integration: p += v⋅dt	Count: 20 - 200, Life: 0.5 - 3 s	Glowing particles emit from text edges	High
Confetti Burst	Euler with gravity: v_y += g⋅dt	Count: 50 - 200, Gravity: 200 px/s²	Colored rectangles burst and fall with rotation	High
Neon Glow	Multiple shadowBlur passes with hue shift	Blur: 5 - 30 px, Pulse: on/off	Text glows like a neon sign	Medium

Frequently Asked Questions

The elastic easing uses an exponential decay envelope of 2^(−10t). As normalized time t approaches 1, the decay factor approaches 2^(−10) ≈ 0.001, effectively damping the sinusoidal oscillation to near-zero amplitude. The period of 0.3 produces approximately 3.3 visible bounces before the motion becomes imperceptible.

Creating and destroying hundreds of particle objects per second triggers frequent garbage collection pauses, causing visible frame drops. The pool pre-allocates a fixed array of 200 particle slots. Dead particles are marked inactive and reused on the next emission cycle. This keeps memory allocation constant and maintains 60 fps on mid-range hardware.

The canvas internal resolution is multiplied by window.devicePixelRatio (typically 2 on Retina displays) while CSS dimensions remain at logical size. This prevents blurry text rendering. However, doubling resolution quadruples the pixel count, so particle-heavy animations on 3x DPR devices (some Android phones) may see performance degradation. The tool caps DPR at 2 for export recording.

The MediaRecorder API outputs VP8/VP9-encoded WebM containers. Browser-native GIF encoding is not available. The exported WebM can be converted to GIF using external tools like FFmpeg (command: ffmpeg -i output.webm -vf "fps=15,scale=480:-1" output.gif). The tool provides the WebM at the canvas resolution and frame rate configured in the settings.

When the operating system or browser signals prefers-reduced-motion: reduce, the animation loop does not start. Instead, the tool renders a single static frame with all characters in their final positions, styled with the selected colors and font. Particle effects are disabled entirely. The user sees a styled message without any movement, ensuring accessibility compliance with WCAG 2.1 criterion 2.3.3.

Canvas text rendering measures each character's advance width via measureText(). For a 640px-wide canvas at 48px font size, approximately 13-16 characters fit per line depending on the typeface. The tool auto-wraps text to multiple lines but reduces font size if more than 3 lines are needed. Beyond 120 characters, per-character animations like wave or spiral become visually cluttered because individual letter motion is indistinguishable. The recommended range is 5-80 characters.