My Framer Site

Remix File

Magnetic Hover Code Override

The famous magnetic hover interaction, first introduced by none other than Apple for their iPad operating system.

Copy the code below and add it as an override. It can be applied to and frames or components.

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

export function withMagneticHover(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props
        const [cordX, setCordX] = useState(0)
        const [cordY, setCordY] = useState(0)
        const motionDrift = 20

        const magneticHover = (e) => {
            var rect = e.target.getBoundingClientRect()
            var posX = e.clientX - rect.left - rect.width / 2
            var posY = e.clientY - rect.top - rect.height / 2
            setCordX((posX / (rect.width / 2)) * motionDrift)
            setCordY((posY / (rect.height / 2)) * motionDrift)
        }

        return (
            <Component
                {...rest}
                onMouseMove={(e) => magneticHover(e)}
                onMouseOut={() => {
                    setCordX(0)
                    setCordY(0)
                }}
                whileHover={{ scale: 1.1 }}
                style={{
                    ...style,
                    x: cordX,
                    y: cordY,
                    transition: "all 150ms",
                }}
            />
        )
    }
}

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

export function withMagneticHover(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props
        const [cordX, setCordX] = useState(0)
        const [cordY, setCordY] = useState(0)
        const motionDrift = 20

        const magneticHover = (e) => {
            var rect = e.target.getBoundingClientRect()
            var posX = e.clientX - rect.left - rect.width / 2
            var posY = e.clientY - rect.top - rect.height / 2
            setCordX((posX / (rect.width / 2)) * motionDrift)
            setCordY((posY / (rect.height / 2)) * motionDrift)
        }

        return (
            <Component
                {...rest}
                onMouseMove={(e) => magneticHover(e)}
                onMouseOut={() => {
                    setCordX(0)
                    setCordY(0)
                }}
                whileHover={{ scale: 1.1 }}
                style={{
                    ...style,
                    x: cordX,
                    y: cordY,
                    transition: "all 150ms",
                }}
            />
        )
    }
}

Turansky Co Ltd