Warp Text
Letters ride a travelling wave, lifting and leaning as it passes. The wave grows around the pointer.
import { WarpText } from "pleate/effects/warp-text";Gentle
Ride the wave
Short, fast wave
Wobbly and proud
Props
- text
The text.
string- amplitude / pointerAmplitude
Wave height at rest and extra near the pointer (em).
numberdefault 0.08 / 0.25- wavelength
Letters per wave.
numberdefault 10- speed
Waves per second.
numberdefault 0.6- skew
Maximum lean (deg).
numberdefault 10
Accessibility
- Screen readers get the plain text.
- Reduced motion keeps the letters still.
- Pauses when off screen.