cursorRGB.tsx

import React, { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

function CursorRGB(props) {
    const [offset, setOffset] = useState(0.018)
    const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 })

    useEffect(() => {
        const handleMouseMove = (e) => {
            setCursorPosition({ x: e.clientX, y: e.clientY })
            setOffset(
                Math.min(0.01, 0.018 + (e.clientX / window.innerWidth) * 0.017)
            )
        }
        document.addEventListener("mousemove", handleMouseMove)
        return () => {
            document.removeEventListener("mousemove", handleMouseMove)
        }
    }, [])

    const textStyle = {
        fontSize: props.fontSize,
        lineHeight: props.lineHeight,
        fontFamily: props.fontFamily,
        fontWeight: props.fontWeight,
        position: "absolute",
        width: props.width,
        height: props.height,
        filter: "blur(0.5px)",
        mixBlendMode: "screen",
    }

    const containerStyle = {
        position: "relative",
        textAlign: "left",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
    }

    return (
        <div style={containerStyle}>
            <motion.div
                style={{
                    ...textStyle,
                    color: props.color1,
                    transform: `translate(${offset * cursorPosition.x}px, ${
                        offset * cursorPosition.y
                    }px)`,
                    height: "auto",
                    width: "auto",
                }}
            >
                {props.text}
            </motion.div>
            <motion.div
                style={{
                    ...textStyle,
                    color: props.color2,
                    transform: `translate(${-offset * cursorPosition.x}px, ${
                        -offset * cursorPosition.y
                    }px)`,
                    height: "auto",
                    width: "auto",
                }}
            >
                {props.text}
            </motion.div>
            <motion.div
                style={{
                    ...textStyle,
                    color: props.color3,
                    transform: `translate(${offset * cursorPosition.x}px, ${
                        -offset * cursorPosition.y
                    }px)`,
                    height: "auto",
                    width: "auto",
                }}
            >
                {props.text}
            </motion.div>
            <motion.div
                style={{
                    ...textStyle,
                    color: "#FFFFFF",
                    transform: `translate(${0}px, ${0}px)`,
                    filter: "none",
                    mixBlendMode: "normal",
                    height: "auto",
                    width: "auto",
                }}
            >
                {props.text}
            </motion.div>
        </div>
    )
}

addPropertyControls(CursorRGB, {
    text: {
        type: ControlType.String,
        title: "Text",
        defaultValue: "Hello World!",
    },
    color1: {
        type: ControlType.Color,
        title: "Color 1",
        defaultValue: "red",
    },
    color2: {
        type: ControlType.Color,
        title: "Color 2",
        defaultValue: "green",
    },
    color3: {
        type: ControlType.Color,
        title: "Color 3",
        defaultValue: "blue",
    },
    fontFamily: {
        type: ControlType.String,
        title: "Font Family",
        defaultValue: "sans-serif",
    },
    fontWeight: {
        type: ControlType.Number,
        title: "Font Weight",
        defaultValue: 800,
        min: 100,
        max: 900,
        step: 100,
    },
    fontSize: {
        type: ControlType.String,
        title: "Font Size",
        defaultValue: "100px",
    },
    lineHeight: {
        type: ControlType.String,
        title: "Line Height",
        defaultValue: "80%",
    },
    /*
    damping: {
        type: ControlType.Number,
        title: "Damping",
        defaultValue: 10,
        min: 1,
        max: 100,
        step: 1,
    },
    stiffness: {
        type: ControlType.Number,
        title: "Stiffness",
        defaultValue: 100,
        min: 10,
        max: 1000,
        step: 10,
    },
    width: {
        type: ControlType.Number,
        title: "Width",
        defaultValue: 300,
        min: 0,
        max: 1000,
        step: 1,
    },
    height: {
        type: ControlType.Number,
        title: "Height",
        defaultValue: 100,
        min: 0,
        max: 1000,
        step: 1,
    },*/
})

export default CursorRGB