Hooked to Cursor

Back

Copy Link

Library

Free

115

Hooked to Cursor

115 Hooked to Cursor

FREE

Items float to get closer to the cursor position

Not loading? Preview

Made by

@frameroverrides

override

hover

Help

Override

Remix & Clone

Hooked to Cursor

Copy

Override

Copied to Clipboard!

Instructions

Attach to frames not images
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,
                }}
            />
        )
    }
}

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