Back

Library

/

Basic

/

114

Glitch Wave

114

Glitch Wave

A customizable glitch wave that moves through any text layer on an infinite loop

Made by

@frameroverrides

override

appear

Override

Glitch Wave

Copy

Override

Copied to Clipboard!

Instructions

Apply to any text layers

At the top of the code under // Controls you can make edits to the wave speed, size, etc.

Code Preview

import type { ComponentType } from "react"
import { useState, useEffect } from "react"

export function onTextGlitchWave(Component): ComponentType {
    return (props) => {
        const value = props.children.props.children.props.children
        const [glitchText, setGlitchText] = useState(value)
        // Controls
        const waveLength = 5 // Number of characters affected by the wave at any given time
        const speed = 50 // Speed of the glitch wave

        const randomChar = () => {
            return String.fromCharCode(33 + Math.random() * (127 - 33))
        }

        useEffect(() => {
            let pos = 0
            const interval = setInterval(() => {
                let newText = value
                    .split("")
                    .map((char, index) => {
                        if (index >= pos && index < pos + waveLength) {
                            return randomChar()
                        }
                        return char
                    })
                    .join("")

                setGlitchText(newText)

                // Move the wave through the text
                pos = (pos + 1) % (value.length + waveLength)
            }, speed)

            return () => clearInterval(interval)
        }, []) // Effect runs on mount only

        return <Component {...props} text={glitchText} />
    }
}

Terms of Use for Pro & VIP Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, paid templates only (with the use of up to 10 assets per template), and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.