Search

Back

Copy Link

Library

/

Pro

/

114

Glitch Wave

114

Glitch Wave

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

Not loading? Preview

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 { motion, useMotionValue, useTransform, useSpring } from "framer-motion"

export function FakeOverride(Component): ComponentType {
    return (props) => {
        // Create motion values for the mouse position (x and y)
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        // Calculate rotation values based on the mouse position
        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        // Apply a smooth spring animation to the rotation values
        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        // Update the motion values on mouse move
        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left
            const mouseY = event.clientY - rect.top

            x.set(mouseX / rect.width)
            y.set(mouseY / rect.height)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    rotateX: animatedRotateX,
                    rotateY: animatedRotateY,
                    transformOrigin: "center",
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }

Terms of Use for Pro 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.