RainChar - Customizable Matrix-Style Rain Effect

RainChar is an animation effect written in JavaScript to create a Matrix-Style effect with full control over customizability.

Usage

Use CDN:

<script src="https://cdn.jsdelivr.net/npm/rain-char"></script>

Create an instance of the effect (all options are optional)

const rain = new RainChar({
    id: 'rain',
    font: 'Consolas',
    charSize: [10, 30]
});

To start the effect call the start method

rain.start();

Demo

m-sarabi.ir/rain-char

Customization

You can customize the effect however you like with the options provided, and you can add an id to each effect individually to style them with CSS.

Most options (except for id and parentId) can be adjusted seamlessly at any time.

Options

| Name | Description | Type | Default value | |-------------------|--------------------------------------------------------------|--------------------------------------------|------------------| | font | The font used for Rain Characters | string | "monospace" | | charSize | The lower and upper limit for the font size | [number, number] | [10, 40] | | charRange | The range of Unicode character, or a list of such ranges | [number, number] or [number, number][] | [0x0021, 0x007e] | | bg | Background color of the canvas | string | "#222" | | fg | Color of the characters | string | "yellow" | | id | The id to be assigned to the canvas element | string | | | fps | Maximum fps (higher means faster rainfall) | number | 30 | | densityFactor | How dense the rainfall is (Lower means denser) | number | 10 | | trailMultiplier | Defines the length of the trail. Higher means shorter trail | number | 1 | | charSpacing | Defines the space between characters (1 means one character) | number | 1 | | charChangeFreq | Defines the probability of characters changing (0% - 100%) | number | 1 | | parentId | id of the element which canvas is appended to | string | body element |

Methods

| Name | Description | |---------|--------------------------------------------------------------| | start | Fresh starts the effect animation. It also acts as a restart | | stop | Stops the effect and clears the canvas. | | pause | Pause/Play the animation. |

By playing with the options above, you can create a variety of effects.

An example snow effect:

Changelog

Changelog

©️ Licence

This project is licensed under the MIT License

Copyright 2024 Mohammad Sarabi