glitch-text


            import glitchText, { animate, repeat } from 'glitch-text'
            const  glitch = glitchText(element)

The quick brown fox jumps over the lazy dog.


            // from left to right
            animate(2000, 50, progress => {
                glitch.slice(progress)
            })

The quick brown fox jumps over the lazy dog.


            // from left to right as a slice of thickness 0.25
            animate(2000, 50, progress => {
                glitch.slice(progress, progress + 0.25)
            })

The quick brown fox jumps over the lazy dog.


            // from right to left
            animate(2000, 50, progress => {
                glitch.slice(-progress)
            })

The quick brown fox jumps over the lazy dog.


            // from right to left as a slice of thickness 0.25
            animate(2000, 50, progress => {
                glitch.slice(-progress - 0.25, -progress)
            })

The quick brown fox jumps over the lazy dog.


            // from center to edges
            animate(2000, 50, progress => {
                glitch.slice(-progress/2 + 0.5, progress/2 + 0.5)
            })

The quick brown fox jumps over the lazy dog.


            // from edges to center
            animate(2000, 50, progress => {
                glitch.slice(progress/2, -progress/2)
            })

The quick brown fox jumps over the lazy dog.


            // glitch 50% of chars randomly every 2 seconds (+/- 0.5)
            repeat(2000, 500, () => {
                animate(500, 10, progress => {
                    if (progress > 0.5) {
                        glitch.random(1 - progress)
                    }
                })
            })