- Docs
- Components
- Backgrounds
- Ascii Waves
Waves made of ASCII characters
| Name | Type | Default | Description |
|---|---|---|---|
characters | string | " .:-+*=%@#" | String of characters to use for the ASCII gradient. |
color | string | "#ffffff" | Color of the ASCII characters. |
waveTension | number | 0.5 | Tension of the wave flow (0.1-2.0). |
waveTwist | number | 0.1 | Twist amount of the wave flow (0.0-1.0). |
invert | boolean | false | Invert the character mapping. |
noiseScale | number | 1.0 | Scale of the noise/wave pattern (zoom). |
elementSize | number | 16.0 | Size of individual ASCII characters/grid cells. |
speed | number | 1.0 | Animation speed multiplier. |
hasCursorInteraction | boolean | true | Whether the waves react to mouse cursor. |
intensity | number | 1.0 | Intensity of the wave effect. |
interactionIntensity | number | 1.0 | Intensity of the cursor interaction. |
className | string | "" | Additional CSS classes. |
videoUrl | string | "" | Direct URL to a video file to be rendered as ASCII. |
charactersstringString of characters to use for the ASCII gradient.
" .:-+*=%@#"colorstringColor of the ASCII characters.
"#ffffff"waveTensionnumberTension of the wave flow (0.1-2.0).
0.5waveTwistnumberTwist amount of the wave flow (0.0-1.0).
0.1invertbooleanInvert the character mapping.
falsenoiseScalenumberScale of the noise/wave pattern (zoom).
1.0elementSizenumberSize of individual ASCII characters/grid cells.
16.0speednumberAnimation speed multiplier.
1.0hasCursorInteractionbooleanWhether the waves react to mouse cursor.
trueintensitynumberIntensity of the wave effect.
1.0interactionIntensitynumberIntensity of the cursor interaction.
1.0classNamestringAdditional CSS classes.
""videoUrlstringDirect URL to a video file to be rendered as ASCII.
""