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).

characters

Typestring

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

String of characters to use for the ASCII gradient.

color

Typestring

Default"#ffffff"

Color of the ASCII characters.

waveTension

Typenumber

Default0.5

Tension of the wave flow (0.1-2.0).

waveTwist

Typenumber

Default0.1

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

invert

Typeboolean

Defaultfalse

Invert the character mapping.

noiseScale

Typenumber

Default1.0

Scale of the noise/wave pattern (zoom).

elementSize

Typenumber

Default16.0

Size of individual ASCII characters/grid cells.

speed

Typenumber

Default1.0

Animation speed multiplier.

hasCursorInteraction

Typeboolean

Defaulttrue

Whether the waves react to mouse cursor.

intensity

Typenumber

Default1.0

Intensity of the wave effect.

interactionIntensity

Typenumber

Default1.0

Intensity of the cursor interaction.

className

Typestring

Default""

Additional CSS classes.

videoUrl

Typestring

Default""

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

bgColor

Typestring

Default"transparent"

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

Dependencies

@react-three/fiber 8.0.0three 0.160.0

Crafted withbyMohammad Tasin