RainChar is an animation effect written in JavaScript to create a Matrix-Style effect with full control over customizability.
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();
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.
| 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 |
| 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.
A snow effect example:
2024-08-25.20-39-35.mp4
This project is licensed under the MIT License
Copyright 2024 Mohammad Sarabi
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent