Rain-char NPM | npm.io

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.

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