This package is a customizable letter glitch background effect for web pages. It allows you to create an interactive and dynamic background effect, with customizable options such as letter color, letter amount, letter size, and animation speed.
<div class="glitch">
<!-- content -->
</div>import createGlitchEffect from 'https://cdn.jsdelivr.net/gh/m00nbyte/letter-glitch@latest/dist/index.es.min.js';
const options = {
container: '.glitch',
...
};
createGlitchEffect(options);<div class="glitch">
<!-- content -->
</div>
<script src="https://cdn.jsdelivr.net/gh/m00nbyte/letter-glitch@latest/dist/index.iife.min.js"></script>const options = {
container: '.glitch',
...
};
window.createGlitchEffect(options);const options = {
containerSelector: null,
chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*-_+=/[]{};:<>,0123456789',
colors: ['#FFFFFF', '#868686', '#373737'],
fontSize: 16,
charWidth: 10,
charHeight: 18,
updateSpeed: 50,
blendOver: false,
backgroundColor: '#101010',
fullVignetteOpacity: 0.9,
sideVignettesOpacity: 0.7,
specialTexts: [],
specialTextColor: '#f0b100',
createElements: false
};The createGlitchEffect function accepts an options object with the following properties:
Type: String
A CSS selector for the container element where the letter glitch will be rendered. This parameter is required and cannot be updated later.
Type: String
The character set used for the glitch effect. You can customize this to use any characters you prefer.
Type: Array<String>
An array of colors for the glitch characters. Characters will randomly cycle through these colors.
Type: Number
The font size in pixels for the glitch characters.
Type: Number
The width in pixels for each character cell. Used to calculate grid dimensions.
Type: Number
The height in pixels for each character cell. Used to calculate grid dimensions.
Type: Number
The base speed for character updates in milliseconds. Lower values make the animation faster.
Type: Boolean
When true, the canvas clears from the bottom-right corner. When false, it clears from the top-left corner.
Type: String
The background color for the animation. Any valid CSS color value is accepted.
Type: Number
Opacity of the side vignette effect. Set to 0 to disable.
Type: Array<String>
An array of strings to display as special highlighted text in the center of the animation. These will appear one at a time with animation effects.
Type: String
The color for special text animations. Any valid CSS color value is accepted.
Type: Boolean
When true, all created elements will be removed during cleanup. When false, only event listeners and intervals will be cleared.
Type: Function
This function allows you to dynamically update the options of the letter glitch after the initial animation has started. This is useful for making real-time changes to the background effect, such as modifying the speed, color, or character appearance without needing to restart the animation.
Just pass an object containing the properties to update. You can provide any combination of the options defined in the initial options. Only the specified properties will be updated, the others will remain unchanged.
const options = {
container: '.glitch',
...
};
const glitchInstance = createGlitchEffect(options);
// update the options anytime
if (glitchInstance) {
glitchInstance.updateOptions({
colors: ['#FF0000', '#00FF00', '#0000FF'],
specialTexts: ['HELLO', 'WORLD'],
updateSpeed: 100
});
}Feel free to submit issues or pull requests.
This project needs a ⭐ from you. Don't forget to leave a star.
