rgbtext.tsx

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

function BlotterText({
    text,
    color1,
    color2,
    color3,
    fontFamily,
    fontWeight,
    fontSize,
    lineHeight,
    delay,
    stiffness,
    damping,
}) {
    const containerStyle = {
        position: "relative",
        textAlign: "left",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
    }

    const textStyle = {
        fontSize: `${fontSize}rem`,
        lineHeight: `${lineHeight}rem`,
        position: "absolute",
    }

    const textVariants = {
        initial: { x: 0, y: 0 },
        animate: { x: [-3, 3], y: [-3, 3] },
    }

    const colors = [color1, color2, color3]

    return (
        <div style={containerStyle}>
            {colors.map((color, index) => (
                <motion.div
                    key={color}
                    style={{ ...textStyle, color }}
                    initial="initial"
                    animate="animate"
                    variants={textVariants}
                    transition={{
                        x: { type: "spring", stiffness, damping },
                        y: { type: "spring", stiffness, damping },
                        delay: index * delay,
                    }}
                >
                    {text}
                </motion.div>
            ))}
        </div>
    )
}

addPropertyControls(BlotterText, {
    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: "Arial",
    },
    fontWeight: {
        type: ControlType.Enum,
        title: "Font Weight",
        defaultValue: "normal",
        options: [
            "normal",
            "bold",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
        ],
        optionTitles: [
            "Normal",
            "Bold",
            "100 (Thin)",
            "200 (Extra Light)",
            "300 (Light)",
            "400 (Regular)",
            "500 (Medium)",
            "600 (Semi Bold)",
            "700 (Bold)",
            "800 (Extra Bold)",
            "900 (Black)",
        ],
    },
    fontSize: {
        type: ControlType.Number,
        title: "Font Size",
        defaultValue: 3,
        min: 1,
        max: 10,
        step: 0.1,
    },
    lineHeight: {
        type: ControlType.Number,
        title: "Line Height",
        defaultValue: 3.5,
        min: 1,
        max: 10,
        step: 0.1,
    },
    delay: {
        type: ControlType.Number,
        title: "Delay",
        defaultValue: 0.05,
        min: 0,
        max: 1,
        step: 0.01,
    },
    stiffness: {
        type: ControlType.Number,
        title: "Stiffness",
        defaultValue: 100,
        min: 0,
        max: 1000,
    },
    damping: {
        type: ControlType.Number,
        title: "Damping",
        defaultValue: 10,
        min: 0,
        max: 100,
    },
})

export default BlotterText