Preferences

Ascii Wave

Customize

Characters

Speed0.7

Element Size14

Noise Scale0.3

Intensity1

Wave Tension0.5

Wave Twist0.1

Interaction Intensity1

Props

Property	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.
`bgColor`	string	`"transparent"`	Background color of the canvas ("transparent" supported).

charactersstring

String of characters to use for the ASCII gradient.

Default" .:-+*=%@#"

colorstring

Color of the ASCII characters.

Default"#ffffff"

waveTensionnumber

Tension of the wave flow (0.1-2.0).

Default0.5

waveTwistnumber

Twist amount of the wave flow (0.0-1.0).

Default0.1

invertboolean

Invert the character mapping.

Defaultfalse

noiseScalenumber

Scale of the noise/wave pattern (zoom).

Default1.0

elementSizenumber

Size of individual ASCII characters/grid cells.

Default16.0

speednumber

Animation speed multiplier.

Default1.0

hasCursorInteractionboolean

Whether the waves react to mouse cursor.

Defaulttrue

intensitynumber

Intensity of the wave effect.

Default1.0

interactionIntensitynumber

Intensity of the cursor interaction.

Default1.0

classNamestring

Additional CSS classes.

Default""

videoUrlstring

Direct URL to a video file to be rendered as ASCII.

Default""

bgColorstring

Background color of the canvas ("transparent" supported).

Default"transparent"

Dependencies

@react-three/fiber 8.0.0three 0.160.0

Crafted withbyMohammad Tasin