cm-glitch

Create distortion animations based on SVG filters. Lightweight and easy to use.

Function: startGlitch

startGlitch creates a distortion animation in the target element and returns a promise that resolves when the animation is complete.

To specify the target element, use its ID.

General Usage Example:

import { startGlitch } from "cm-glitch"

startGlitch("elementId")

More Customized Example (with React):

import OsakaMiB from "../../assets/osaka-mib.png"
import { startGlitch } from "cm-glitch"
import './home.css'

export function Home() {

    const handleClick1 = () => {
        startGlitch("button-1")
    }

    const handleClick2 = async () => {
        await startGlitch("image", {
            animationTime: 800,
        })

        startGlitch("image", {
            animationTime: 200,
            direction: "reverse",
            loops: 3,
            maxDistortionY: 0,
            maxDistortionX: 900,
            distortionIntensity: 20
        })
    }

    return (
        <main>
            <button id="button-1" onClick={handleClick1}>
                ClIcK M3
            </button>
            <button onClick={handleClick2}>
                <img src={OsakaMiB} id="image" />
            </button>
        </main>
    )
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | animationTime | number | 300 | Duration of the animation in milliseconds | | maxDistortionX | number | 0 | Maximum horizontal distortion | | maxDistortionY | number | 2500 | Maximum vertical distortion | | direction | 'normal' | 'reverse' | 'alternate' | 'alternate' | Animation direction | | distortionIntensity | number | 40 | Intensity of the distortion effect | | loops | number | 1 | Number of times the animation should repeat | | earlyCleanup | boolean | false | Enable automatic cleanup right after animation ends | noObservers | boolean | false | Disable automatic cleanup observers |

Function: removeGlitch

removeGlitch is a manual way to clean up the DOM, removing the created SVG filters as well as any styles added to the target element.

In most cases, you won't need to use this, since the cleanup is automatically handled using observers when target element is removed from the DOM.

If you are using multiple glitched elements on the same page, you can solve performance issues with the earlyCleanup: true option in startGlitch (DOM will have more updates, but less content).

However, if you want to have full control over DOM changes, you can pass the noObservers: true option to startGlitch, and then call removeGlitch manually when needed.

Example:

import { startGlitch, removeGlitch } from "cm-glitch"

const glitchTrigger = async () => {
    await startGlitch("elementId", { noObservers: true })

    // Cleanup Right After Animation Ends
    removeGlitch("elementId")
}

Notes

• The effect is created using SVG filters (feTurbulence and feDisplacementMap).
• The animation is synchronized with the screen's refresh rate.
• You can apply this effect to images, text, inputs... almost any visible element.