ASCII Ripple
A field of monospace characters that ripples like water under the pointer. Taps drop bigger waves, and an idle drop keeps it alive when nobody is around.
import { AsciiRipple } from "pleate/effects/ascii-ripple";Behind a title
Move or tap
Custom glyphs and colors
Bigger cells, round glyphs, slower damping, inverted colors.
Props
- charset
Glyphs from light to dense. A leading space keeps calm water empty.
stringdefault " .:-=+*#%@"- cellSize
Font size of one cell in px.
numberdefault 14- color
Color of the wave crests.
stringdefault "var(--pl-accent)"- baseColor
Color of the calm field.
stringdefault "var(--pl-fg)"- baseOpacity
Opacity of the calm field.
numberdefault 0.16- damping
How long ripples last, 0.9 to 0.995.
numberdefault 0.965- idle
Drop ripples on its own when no pointer is around.
booleandefault true- interactive
Follow the pointer and taps over the parent element.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content above it stays clickable.
- Reduced motion draws one still frame with a ripple already in it.
- Pauses off screen and in hidden tabs.