Liquid Glass

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

/**
 * META — read by scripts/gen-framer-components.mjs to build
 * src/data/framer-components.json. Keep this a plain object literal: string
 * and string-array values only, no function calls, no template interpolation.
 */
export const META = {
    slug: "liquid-glass",
    title: "Liquid Glass",
    description:
        "A frosted, tinted glass panel with a soft animated glow and a hover lift — drop any content inside as a child override.",
    tags: ["glassmorphism", "card", "panel", "blur", "effect"],
    category: "custom-framer",
}

interface LiquidGlassProps {
    tint: string
    blur: number
    opacity: number
    children?: React.ReactNode
}

/**
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function LiquidGlass(props: LiquidGlassProps) {
    const { tint, blur, opacity, children } = props

    return (
        <motion.div
            style={{
                position: "relative",
                padding: 24,
                borderRadius: 20,
                background: `linear-gradient(135deg, ${tint}20, ${tint}10)`,
                backdropFilter: `blur(${blur}px)`,
                WebkitBackdropFilter: `blur(${blur}px)`,
                border: `1px solid ${tint}30`,
                boxShadow: `
                    0 8px 32px rgba(0, 0, 0, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2)
                `,
                opacity: opacity,
                overflow: "hidden",
            }}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            whileHover={{
                scale: 1.02,
                transition: { duration: 0.3, ease: "easeOut" }
            }}
            transition={{ duration: 0.6, ease: "easeOut" }}
        >
            <motion.div
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    background: `radial-gradient(circle at 50% 0%, ${tint}15, transparent 70%)`,
                    pointerEvents: "none",
                }}
                animate={{
                    opacity: [0.3, 0.7, 0.3],
                }}
                transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "easeInOut"
                }}
            />
            <div style={{ position: "relative", zIndex: 1 }}>
                {children || (
                    <div>
                        <h2 style={{ margin: 0, marginBottom: 12, color: "#ffffff", fontSize: 18, fontWeight: 600 }}>
                            Liquid Glass
                        </h2>
                        <p style={{ margin: 0, color: "#ffffff90", fontSize: 14, lineHeight: 1.4 }}>
                            Experience the future of UI design with smooth, organic animations.
                        </p>
                    </div>
                )}
            </div>
        </motion.div>
    )
}

addPropertyControls(LiquidGlass, {
    tint: {
        title: "Tint",
        type: ControlType.Color,
        defaultValue: "#09F",
    },
    blur: {
        title: "Blur",
        type: ControlType.Number,
        defaultValue: 10,
        min: 0,
        max: 30,
        step: 1,
    },
    opacity: {
        title: "Opacity",
        type: ControlType.Number,
        defaultValue: 0.9,
        min: 0,
        max: 1,
        step: 0.1,
    },
    children: {
        title: "Content",
        type: ControlType.ComponentInstance,
    },
})