Replace Cursor with Frame

Back

Copy Link

Library

Free

71 Replace Cursor with Frame

FREE

Not loading? Preview

Made by

@frameroverrides

override

none

Help

Override

Remix & Clone

Replace Cursor with Frame

Copy

Override

Copied to Clipboard!

Instructions

Under the component style at the bottom of the snippet you will see top & left positioning. You may need to adjust these numbers to a negative value like -20 to better position your object. This will be determined by the size of your frame.
Select your desktop frame and go over to “style” on the right. Change your “cursor” to none.

Code Preview

import { useRef, useEffect } from "react"
import type { ComponentType } from "react"
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"

export function withPointer(Component): ComponentType {
    return (props) => {
        // Create motion values for the position (x, y) and scale
        const x = useMotionValue(0)
        const y = useMotionValue(0)
        const scale = useMotionValue(0)

        const springConfig = { damping: 30, stiffness: 300 }
        const springX = useSpring(x, springConfig)
        const springY = useSpring(y, springConfig)

        const handleMove = (event) => {
            x.set(event.clientX || event.touches[0].clientX)
            y.set(event.clientY || event.touches[0].clientY)
        }

        const handleMouseEnter = () => scale.set(1)
        const handleMouseLeave = () => scale.set(0)

        useEffect(() => {
            // Add event listeners to the document
            document.addEventListener("mousemove", handleMove)
            document.addEventListener("touchmove", handleMove)
            document.addEventListener("mouseenter", handleMouseEnter)
            document.addEventListener("mouseleave", handleMouseLeave)

            return () => {
                document.removeEventListener("mousemove", handleMove)
                document.removeEventListener("touchmove", handleMove)
                document.removeEventListener("mouseenter", handleMouseEnter)
                document.removeEventListener("mouseleave", handleMouseLeave)
            }
        }, [])

        const springScale = useSpring(scale, springConfig)

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    x: springX,
                    y: springY,
                    scale: springScale,
                    position: "fixed",
                    pointerEvents: "none",
                    top: 0,
                    left: 0,
                    zIndex: 999,
                }}
            />
        )
    }
}

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.