Character Waves
0
Used by 0Controls
Character Waves
Fill any background with a flowing field of ASCII characters driven by layered noise waves that ripple away from the cursor.
KEY FEATURES
- — Customizable character ramp with invert toggle
- — Directional wave travel across left, right, top, and bottom
- — Cursor-driven ripples with adjustable force and radius
- — Adjustable cell size and monospace font weight
- — Solid color control for the whole character field
- — Speed, tension, scale, and intensity wave tuning
- — Retina-aware canvas that auto-resizes to its container
- — Freezes to a single frame on export and thumbnail renders
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
characters
string
°•◦○◉●
Glyphs used from lightest to densest as the wave ramp.
elementSize
number
16
Size of each character cell in pixels; larger is coarser.
direction
enum
left
Direction the waves travel: left, right, top, or bottom.
invert
boolean
false
Reverses the ramp so dense glyphs map to low values.
fontWeight
enum
400
Font weight of the characters, from Light to Extra Bold.
waveTension
number
5
Churn rate of the wave noise; higher ripples faster.
noiseScale
number
12
Spatial frequency of the noise; higher adds finer detail.
intensity
number
10
Contrast of the ramp; higher pushes glyphs to the extremes.
hasCursorInteraction
boolean
true
Enables cursor ripples that push through the field.
interactionIntensity
number
15
Strength of the ripple the cursor stirs up.
interactionRadius
number
160
Radius in pixels around the cursor that ripples react.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
speed
number
20
How fast the waves animate; higher is faster.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#ffffff
Color of the ASCII characters.
