ASCII Wave

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/ascii-wave

Usage

import { AsciiWave } from "@reactbytes/ascii-wave";

export default function Example() {
  return (
    <AsciiWave />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | gap | number | 40 | Distance between each character in the grid. | | radiusVmin | number | 30 | Radius of influence from the mouse pointer (in vmin). | | speedIn | number | 0.5 | Speed factor when a character is scaling up. | | speedOut | number | 0.6 | Speed factor when a character is scaling down to rest. | | restScale | number | 0.09 | The base scale of characters when at rest. | | minHoverScale | number | 1 | Minimum scale a character can reach when hovered. | | maxHoverScale | number | 3 | Maximum scale a character can reach when hovered. | | waveSpeed | number | 1200 | Speed of the click wave propagation. | | waveWidth | number | 180 | Thickness of the click wave. | | chars | select | @#$%&*+=?AX01∑∆πΩ | Characters to use in the wave grid. | | colorMode | boolean | true | Toggle between using the provided palette or grayscale equivalents. | | backgroundColor | color | #050505 | Canvas and container background color. |

Presets

This component includes the following design presets:

• Default Style (default)
• Dense Matrix (dense)
• Sparse & Fast (sparse)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - ASCII Wave.