Back

Library

/

Pro

/

115

Hooked to Cursor

115

Hooked to Cursor

Items float to get closer to the cursor position

Made by

@frameroverrides

override

hover

Override

Hooked to Cursor

Copy

Override

Copied to Clipboard!

Instructions

  1. Attach to frames not images

  2. At the top of the code you can adjust item1,2,3 by adjusting these values: const item1 = 5

Code Preview

import type { ComponentType } from "react"
import { useEffect, useRef, useState } from "react"
import { motion } from "framer-motion"

const item1 = 5
const item2 = 10
const item3 = 15

export function itemOne(Component): ComponentType {
    return (props) => {
        const [positionOffset, setPositionOffset] = useState({ x: 0, y: 0 })
        const position = useRef({ x: 0, y: 0 })
        const componentRef = useRef()
        const initialUpdateDone = useRef(false)

        const handleMove = (event) => {
            let x, y
            if (event.changedTouches) {
                x = event.changedTouches[0].clientX
                y = event.changedTouches[0].clientY
            } else {
                x = event.clientX
                y = event.clientY
            }

            if (componentRef.current) {
                const rect = componentRef.current.getBoundingClientRect()
                const centerX = rect.left + rect.width / 2
                const centerY = rect.top + rect.height / 2
                const offsetX = (x - centerX) / item1
                const offsetY = (y - centerY) / item1

                position.current = { x, y }
                if (initialUpdateDone.current) {
                    setPositionOffset({ x: offsetX, y: offsetY })
                }
            }
        }

        useEffect(() => {
            window.addEventListener("mousemove", handleMove)
            window.addEventListener("touchmove", handleMove)

            return () => {
                window.removeEventListener("mousemove", handleMove)
                window.removeEventListener("touchmove", handleMove)
            }
        }, [])

        useEffect(() => {
            initialUpdateDone.current = true
        }, [])

        return (
            <Component
                {...props}
                ref={componentRef}
                as={motion.div}
                animate={{
                    x: positionOffset.x,
                    y: positionOffset.y,
                }}
                transition={{ type: "spring", stiffness: 120, damping: 14 }}
                style={{
                    ...props.style,
                }}
            />
        )
    }
}
export function itemTwo(Component): ComponentType {
    return (props) => {
        const [positionOffset, setPositionOffset] = useState({ x: 0, y: 0 })
        const position = useRef({ x: 0, y: 0 })
        const componentRef = useRef()
        const initialUpdateDone = useRef(false)

        const handleMove = (event) => {
            let x, y
            if (event.changedTouches) {
                x = event.changedTouches[0].clientX
                y = event.changedTouches[0].clientY
            } else {
                x = event.clientX
                y = event.clientY
            }

            if (componentRef.current) {
                const rect = componentRef.current.getBoundingClientRect()
                const centerX = rect.left + rect.width / 2
                const centerY = rect.top + rect.height / 2
                const offsetX = (x - centerX) / item2
                const offsetY = (y - centerY) / item2

                position.current = { x, y }
                if (initialUpdateDone.current) {
                    setPositionOffset({ x: offsetX, y: offsetY })
                }
            }
        }

        useEffect(() => {
            window.addEventListener("mousemove", handleMove)
            window.addEventListener("touchmove", handleMove)

            return () => {
                window.removeEventListener("mousemove", handleMove)
                window.removeEventListener("touchmove", handleMove)
            }
        }, [])

        useEffect(() => {
            initialUpdateDone.current = true
        }, [])

        return (
            <Component
                {...props}
                ref={componentRef}
                as={motion.div}
                animate={{
                    x: positionOffset.x,
                    y: positionOffset.y,
                }}
                transition={{ type: "spring", stiffness: 120, damping: 14 }}
                style={{
                    ...props.style,
                }}
            />
        )
    }
}
export function itemThree(Component): ComponentType {
    return (props) => {
        const [positionOffset, setPositionOffset] = useState({ x: 0, y: 0 })
        const position = useRef({ x: 0, y: 0 })
        const componentRef = useRef()
        const initialUpdateDone = useRef(false)

        const handleMove = (event) => {
            let x, y
            if (event.changedTouches) {
                x = event.changedTouches[0].clientX
                y = event.changedTouches[0].clientY
            } else {
                x = event.clientX
                y = event.clientY
            }

            if (componentRef.current) {
                const rect = componentRef.current.getBoundingClientRect()
                const centerX = rect.left + rect.width / 2
                const centerY = rect.top + rect.height / 2
                const offsetX = (x - centerX) / item3
                const offsetY = (y - centerY) / item3

                position.current = { x, y }
                if (initialUpdateDone.current) {
                    setPositionOffset({ x: offsetX, y: offsetY })
                }
            }
        }

        useEffect(() => {
            window.addEventListener("mousemove", handleMove)
            window.addEventListener("touchmove", handleMove)

            return () => {
                window.removeEventListener("mousemove", handleMove)
                window.removeEventListener("touchmove", handleMove)
            }
        }, [])

        useEffect(() => {
            initialUpdateDone.current = true
        }, [])

        return (
            <Component
                {...props}
                ref={componentRef}
                as={motion.div}
                animate={{
                    x: positionOffset.x,
                    y: positionOffset.y,
                }}
                transition={{ type: "spring", stiffness: 120, damping: 14 }}
                style={{
                    ...props.style,
                }}
            />
        )
    }
}

Previous

Next

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.