{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "MagicBento-JS-TW",
	"title": "MagicBento",
	"description": "Interactive bento grid tiles expand + animate with various options.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "MagicBento/MagicBento.jsx",
			"content": "import { useRef, useEffect, useState, useCallback } from 'react';\nimport { gsap } from 'gsap';\n\nconst DEFAULT_PARTICLE_COUNT = 12;\nconst DEFAULT_SPOTLIGHT_RADIUS = 300;\nconst DEFAULT_GLOW_COLOR = '132, 0, 255';\nconst MOBILE_BREAKPOINT = 768;\n\nconst cardData = [\n  {\n    color: '#120F17',\n    title: 'Analytics',\n    description: 'Track user behavior',\n    label: 'Insights'\n  },\n  {\n    color: '#120F17',\n    title: 'Dashboard',\n    description: 'Centralized data view',\n    label: 'Overview'\n  },\n  {\n    color: '#120F17',\n    title: 'Collaboration',\n    description: 'Work together seamlessly',\n    label: 'Teamwork'\n  },\n  {\n    color: '#120F17',\n    title: 'Automation',\n    description: 'Streamline workflows',\n    label: 'Efficiency'\n  },\n  {\n    color: '#120F17',\n    title: 'Integration',\n    description: 'Connect favorite tools',\n    label: 'Connectivity'\n  },\n  {\n    color: '#120F17',\n    title: 'Security',\n    description: 'Enterprise-grade protection',\n    label: 'Protection'\n  }\n];\n\nconst createParticleElement = (x, y, color = DEFAULT_GLOW_COLOR) => {\n  const el = document.createElement('div');\n  el.className = 'particle';\n  el.style.cssText = `\n    position: absolute;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: rgba(${color}, 1);\n    box-shadow: 0 0 6px rgba(${color}, 0.6);\n    pointer-events: none;\n    z-index: 100;\n    left: ${x}px;\n    top: ${y}px;\n  `;\n  return el;\n};\n\nconst calculateSpotlightValues = radius => ({\n  proximity: radius * 0.5,\n  fadeDistance: radius * 0.75\n});\n\nconst updateCardGlowProperties = (card, mouseX, mouseY, glow, radius) => {\n  const rect = card.getBoundingClientRect();\n  const relativeX = ((mouseX - rect.left) / rect.width) * 100;\n  const relativeY = ((mouseY - rect.top) / rect.height) * 100;\n\n  card.style.setProperty('--glow-x', `${relativeX}%`);\n  card.style.setProperty('--glow-y', `${relativeY}%`);\n  card.style.setProperty('--glow-intensity', glow.toString());\n  card.style.setProperty('--glow-radius', `${radius}px`);\n};\n\nconst ParticleCard = ({\n  children,\n  className = '',\n  disableAnimations = false,\n  style,\n  particleCount = DEFAULT_PARTICLE_COUNT,\n  glowColor = DEFAULT_GLOW_COLOR,\n  enableTilt = true,\n  clickEffect = false,\n  enableMagnetism = false\n}) => {\n  const cardRef = useRef(null);\n  const particlesRef = useRef([]);\n  const timeoutsRef = useRef([]);\n  const isHoveredRef = useRef(false);\n  const memoizedParticles = useRef([]);\n  const particlesInitialized = useRef(false);\n  const magnetismAnimationRef = useRef(null);\n\n  const initializeParticles = useCallback(() => {\n    if (particlesInitialized.current || !cardRef.current) return;\n\n    const { width, height } = cardRef.current.getBoundingClientRect();\n    memoizedParticles.current = Array.from({ length: particleCount }, () =>\n      createParticleElement(Math.random() * width, Math.random() * height, glowColor)\n    );\n    particlesInitialized.current = true;\n  }, [particleCount, glowColor]);\n\n  const clearAllParticles = useCallback(() => {\n    timeoutsRef.current.forEach(clearTimeout);\n    timeoutsRef.current = [];\n    magnetismAnimationRef.current?.kill();\n\n    particlesRef.current.forEach(particle => {\n      gsap.to(particle, {\n        scale: 0,\n        opacity: 0,\n        duration: 0.3,\n        ease: 'back.in(1.7)',\n        onComplete: () => {\n          particle.parentNode?.removeChild(particle);\n        }\n      });\n    });\n    particlesRef.current = [];\n  }, []);\n\n  const animateParticles = useCallback(() => {\n    if (!cardRef.current || !isHoveredRef.current) return;\n\n    if (!particlesInitialized.current) {\n      initializeParticles();\n    }\n\n    memoizedParticles.current.forEach((particle, index) => {\n      const timeoutId = setTimeout(() => {\n        if (!isHoveredRef.current || !cardRef.current) return;\n\n        const clone = particle.cloneNode(true);\n        cardRef.current.appendChild(clone);\n        particlesRef.current.push(clone);\n\n        gsap.fromTo(clone, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' });\n\n        gsap.to(clone, {\n          x: (Math.random() - 0.5) * 100,\n          y: (Math.random() - 0.5) * 100,\n          rotation: Math.random() * 360,\n          duration: 2 + Math.random() * 2,\n          ease: 'none',\n          repeat: -1,\n          yoyo: true\n        });\n\n        gsap.to(clone, {\n          opacity: 0.3,\n          duration: 1.5,\n          ease: 'power2.inOut',\n          repeat: -1,\n          yoyo: true\n        });\n      }, index * 100);\n\n      timeoutsRef.current.push(timeoutId);\n    });\n  }, [initializeParticles]);\n\n  useEffect(() => {\n    if (disableAnimations || !cardRef.current) return;\n\n    const element = cardRef.current;\n\n    const handleMouseEnter = () => {\n      isHoveredRef.current = true;\n      animateParticles();\n\n      if (enableTilt) {\n        gsap.to(element, {\n          rotateX: 5,\n          rotateY: 5,\n          duration: 0.3,\n          ease: 'power2.out',\n          transformPerspective: 1000\n        });\n      }\n    };\n\n    const handleMouseLeave = () => {\n      isHoveredRef.current = false;\n      clearAllParticles();\n\n      if (enableTilt) {\n        gsap.to(element, {\n          rotateX: 0,\n          rotateY: 0,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      }\n\n      if (enableMagnetism) {\n        gsap.to(element, {\n          x: 0,\n          y: 0,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      }\n    };\n\n    const handleMouseMove = e => {\n      if (!enableTilt && !enableMagnetism) return;\n\n      const rect = element.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n      const centerX = rect.width / 2;\n      const centerY = rect.height / 2;\n\n      if (enableTilt) {\n        const rotateX = ((y - centerY) / centerY) * -10;\n        const rotateY = ((x - centerX) / centerX) * 10;\n\n        gsap.to(element, {\n          rotateX,\n          rotateY,\n          duration: 0.1,\n          ease: 'power2.out',\n          transformPerspective: 1000\n        });\n      }\n\n      if (enableMagnetism) {\n        const magnetX = (x - centerX) * 0.05;\n        const magnetY = (y - centerY) * 0.05;\n\n        magnetismAnimationRef.current = gsap.to(element, {\n          x: magnetX,\n          y: magnetY,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      }\n    };\n\n    const handleClick = e => {\n      if (!clickEffect) return;\n\n      const rect = element.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n\n      const maxDistance = Math.max(\n        Math.hypot(x, y),\n        Math.hypot(x - rect.width, y),\n        Math.hypot(x, y - rect.height),\n        Math.hypot(x - rect.width, y - rect.height)\n      );\n\n      const ripple = document.createElement('div');\n      ripple.style.cssText = `\n        position: absolute;\n        width: ${maxDistance * 2}px;\n        height: ${maxDistance * 2}px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%);\n        left: ${x - maxDistance}px;\n        top: ${y - maxDistance}px;\n        pointer-events: none;\n        z-index: 1000;\n      `;\n\n      element.appendChild(ripple);\n\n      gsap.fromTo(\n        ripple,\n        {\n          scale: 0,\n          opacity: 1\n        },\n        {\n          scale: 1,\n          opacity: 0,\n          duration: 0.8,\n          ease: 'power2.out',\n          onComplete: () => ripple.remove()\n        }\n      );\n    };\n\n    element.addEventListener('mouseenter', handleMouseEnter);\n    element.addEventListener('mouseleave', handleMouseLeave);\n    element.addEventListener('mousemove', handleMouseMove);\n    element.addEventListener('click', handleClick);\n\n    return () => {\n      isHoveredRef.current = false;\n      element.removeEventListener('mouseenter', handleMouseEnter);\n      element.removeEventListener('mouseleave', handleMouseLeave);\n      element.removeEventListener('mousemove', handleMouseMove);\n      element.removeEventListener('click', handleClick);\n      clearAllParticles();\n    };\n  }, [animateParticles, clearAllParticles, disableAnimations, enableTilt, enableMagnetism, clickEffect, glowColor]);\n\n  return (\n    <div\n      ref={cardRef}\n      className={`${className} relative overflow-hidden`}\n      style={{ ...style, position: 'relative', overflow: 'hidden' }}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst GlobalSpotlight = ({\n  gridRef,\n  disableAnimations = false,\n  enabled = true,\n  spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,\n  glowColor = DEFAULT_GLOW_COLOR\n}) => {\n  const spotlightRef = useRef(null);\n  const isInsideSection = useRef(false);\n\n  useEffect(() => {\n    if (disableAnimations || !gridRef?.current || !enabled) return;\n\n    const spotlight = document.createElement('div');\n    spotlight.className = 'global-spotlight';\n    spotlight.style.cssText = `\n      position: fixed;\n      width: 800px;\n      height: 800px;\n      border-radius: 50%;\n      pointer-events: none;\n      background: radial-gradient(circle,\n        rgba(${glowColor}, 0.15) 0%,\n        rgba(${glowColor}, 0.08) 15%,\n        rgba(${glowColor}, 0.04) 25%,\n        rgba(${glowColor}, 0.02) 40%,\n        rgba(${glowColor}, 0.01) 65%,\n        transparent 70%\n      );\n      z-index: 200;\n      opacity: 0;\n      transform: translate(-50%, -50%);\n      mix-blend-mode: screen;\n    `;\n    document.body.appendChild(spotlight);\n    spotlightRef.current = spotlight;\n\n    const handleMouseMove = e => {\n      if (!spotlightRef.current || !gridRef.current) return;\n\n      const section = gridRef.current.closest('.bento-section');\n      const rect = section?.getBoundingClientRect();\n      const mouseInside =\n        rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;\n\n      isInsideSection.current = mouseInside || false;\n      const cards = gridRef.current.querySelectorAll('.card');\n\n      if (!mouseInside) {\n        gsap.to(spotlightRef.current, {\n          opacity: 0,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n        cards.forEach(card => {\n          card.style.setProperty('--glow-intensity', '0');\n        });\n        return;\n      }\n\n      const { proximity, fadeDistance } = calculateSpotlightValues(spotlightRadius);\n      let minDistance = Infinity;\n\n      cards.forEach(card => {\n        const cardElement = card;\n        const cardRect = cardElement.getBoundingClientRect();\n        const centerX = cardRect.left + cardRect.width / 2;\n        const centerY = cardRect.top + cardRect.height / 2;\n        const distance =\n          Math.hypot(e.clientX - centerX, e.clientY - centerY) - Math.max(cardRect.width, cardRect.height) / 2;\n        const effectiveDistance = Math.max(0, distance);\n\n        minDistance = Math.min(minDistance, effectiveDistance);\n\n        let glowIntensity = 0;\n        if (effectiveDistance <= proximity) {\n          glowIntensity = 1;\n        } else if (effectiveDistance <= fadeDistance) {\n          glowIntensity = (fadeDistance - effectiveDistance) / (fadeDistance - proximity);\n        }\n\n        updateCardGlowProperties(cardElement, e.clientX, e.clientY, glowIntensity, spotlightRadius);\n      });\n\n      gsap.to(spotlightRef.current, {\n        left: e.clientX,\n        top: e.clientY,\n        duration: 0.1,\n        ease: 'power2.out'\n      });\n\n      const targetOpacity =\n        minDistance <= proximity\n          ? 0.8\n          : minDistance <= fadeDistance\n            ? ((fadeDistance - minDistance) / (fadeDistance - proximity)) * 0.8\n            : 0;\n\n      gsap.to(spotlightRef.current, {\n        opacity: targetOpacity,\n        duration: targetOpacity > 0 ? 0.2 : 0.5,\n        ease: 'power2.out'\n      });\n    };\n\n    const handleMouseLeave = () => {\n      isInsideSection.current = false;\n      gridRef.current?.querySelectorAll('.card').forEach(card => {\n        card.style.setProperty('--glow-intensity', '0');\n      });\n      if (spotlightRef.current) {\n        gsap.to(spotlightRef.current, {\n          opacity: 0,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      }\n    };\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseleave', handleMouseLeave);\n\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseleave', handleMouseLeave);\n      spotlightRef.current?.parentNode?.removeChild(spotlightRef.current);\n    };\n  }, [gridRef, disableAnimations, enabled, spotlightRadius, glowColor]);\n\n  return null;\n};\n\nconst BentoCardGrid = ({ children, gridRef }) => (\n  <div\n    className=\"bento-section grid gap-2 p-3 max-w-[54rem] select-none relative\"\n    style={{ fontSize: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)' }}\n    ref={gridRef}\n  >\n    {children}\n  </div>\n);\n\nconst useMobileDetection = () => {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const checkMobile = () => setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);\n\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n\n    return () => window.removeEventListener('resize', checkMobile);\n  }, []);\n\n  return isMobile;\n};\n\nconst MagicBento = ({\n  textAutoHide = true,\n  enableStars = true,\n  enableSpotlight = true,\n  enableBorderGlow = true,\n  disableAnimations = false,\n  spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,\n  particleCount = DEFAULT_PARTICLE_COUNT,\n  enableTilt = false,\n  glowColor = DEFAULT_GLOW_COLOR,\n  clickEffect = true,\n  enableMagnetism = true\n}) => {\n  const gridRef = useRef(null);\n  const isMobile = useMobileDetection();\n  const shouldDisableAnimations = disableAnimations || isMobile;\n\n  return (\n    <>\n      <style>\n        {`\n          .bento-section {\n            --glow-x: 50%;\n            --glow-y: 50%;\n            --glow-intensity: 0;\n            --glow-radius: 200px;\n            --glow-color: ${glowColor};\n            --border-color: #2F293A;\n            --background-dark: #120F17;\n            --white: hsl(0, 0%, 100%);\n            --purple-primary: rgba(132, 0, 255, 1);\n            --purple-glow: rgba(132, 0, 255, 0.2);\n            --purple-border: rgba(132, 0, 255, 0.8);\n          }\n          \n          .card-responsive {\n            grid-template-columns: 1fr;\n            width: 90%;\n            margin: 0 auto;\n            padding: 0.5rem;\n          }\n          \n          @media (min-width: 600px) {\n            .card-responsive {\n              grid-template-columns: repeat(2, 1fr);\n            }\n          }\n          \n          @media (min-width: 1024px) {\n            .card-responsive {\n              grid-template-columns: repeat(4, 1fr);\n            }\n            \n            .card-responsive .card:nth-child(3) {\n              grid-column: span 2;\n              grid-row: span 2;\n            }\n            \n            .card-responsive .card:nth-child(4) {\n              grid-column: 1 / span 2;\n              grid-row: 2 / span 2;\n            }\n            \n            .card-responsive .card:nth-child(6) {\n              grid-column: 4;\n              grid-row: 3;\n            }\n          }\n          \n          .card--border-glow::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            padding: 6px;\n            background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),\n                rgba(${glowColor}, calc(var(--glow-intensity) * 0.8)) 0%,\n                rgba(${glowColor}, calc(var(--glow-intensity) * 0.4)) 30%,\n                transparent 60%);\n            border-radius: inherit;\n            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            -webkit-mask-composite: xor;\n            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            mask-composite: exclude;\n            pointer-events: none;\n            opacity: 1;\n            transition: opacity 0.3s ease;\n            z-index: 1;\n          }\n          \n          .card--border-glow:hover::after {\n            opacity: 1;\n          }\n          \n          .card--border-glow:hover {\n            box-shadow: 0 4px 20px rgba(46, 24, 78, 0.4), 0 0 30px rgba(${glowColor}, 0.2);\n          }\n          \n          .particle::before {\n            content: '';\n            position: absolute;\n            top: -2px;\n            left: -2px;\n            right: -2px;\n            bottom: -2px;\n            background: rgba(${glowColor}, 0.2);\n            border-radius: 50%;\n            z-index: -1;\n          }\n          \n          .particle-container:hover {\n            box-shadow: 0 4px 20px rgba(46, 24, 78, 0.2), 0 0 30px rgba(${glowColor}, 0.2);\n          }\n          \n          .text-clamp-1 {\n            display: -webkit-box;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 1;\n            line-clamp: 1;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          }\n          \n          .text-clamp-2 {\n            display: -webkit-box;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            line-clamp: 2;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          }\n          \n          @media (max-width: 599px) {\n            .card-responsive {\n              grid-template-columns: 1fr;\n              width: 90%;\n              margin: 0 auto;\n              padding: 0.5rem;\n            }\n            \n            .card-responsive .card {\n              width: 100%;\n              min-height: 180px;\n            }\n          }\n        `}\n      </style>\n\n      {enableSpotlight && (\n        <GlobalSpotlight\n          gridRef={gridRef}\n          disableAnimations={shouldDisableAnimations}\n          enabled={enableSpotlight}\n          spotlightRadius={spotlightRadius}\n          glowColor={glowColor}\n        />\n      )}\n\n      <BentoCardGrid gridRef={gridRef}>\n        <div className=\"card-responsive grid gap-2\">\n          {cardData.map((card, index) => {\n            const baseClassName = `card flex flex-col justify-between relative aspect-[4/3] min-h-[200px] w-full max-w-full p-5 rounded-[20px] border border-solid font-light overflow-hidden transition-colors duration-300 ease-in-out hover:-translate-y-0.5 hover:shadow-[0_8px_25px_rgba(0,0,0,0.15)] ${\n              enableBorderGlow ? 'card--border-glow' : ''\n            }`;\n\n            const cardStyle = {\n              backgroundColor: card.color || 'var(--background-dark)',\n              borderColor: 'var(--border-color)',\n              color: 'var(--white)',\n              '--glow-x': '50%',\n              '--glow-y': '50%',\n              '--glow-intensity': '0',\n              '--glow-radius': '200px'\n            };\n\n            if (enableStars) {\n              return (\n                <ParticleCard\n                  key={index}\n                  className={baseClassName}\n                  style={cardStyle}\n                  disableAnimations={shouldDisableAnimations}\n                  particleCount={particleCount}\n                  glowColor={glowColor}\n                  enableTilt={enableTilt}\n                  clickEffect={clickEffect}\n                  enableMagnetism={enableMagnetism}\n                >\n                  <div className=\"card__header flex justify-between gap-3 relative text-white\">\n                    <span className=\"card__label text-base\">{card.label}</span>\n                  </div>\n                  <div className=\"card__content flex flex-col relative text-white\">\n                    <h3 className={`card__title font-normal text-base m-0 mb-1 ${textAutoHide ? 'text-clamp-1' : ''}`}>\n                      {card.title}\n                    </h3>\n                    <p\n                      className={`card__description text-xs leading-5 opacity-90 ${textAutoHide ? 'text-clamp-2' : ''}`}\n                    >\n                      {card.description}\n                    </p>\n                  </div>\n                </ParticleCard>\n              );\n            }\n\n            return (\n              <div\n                key={index}\n                className={baseClassName}\n                style={cardStyle}\n                ref={el => {\n                  if (!el) return;\n\n                  const handleMouseMove = e => {\n                    if (shouldDisableAnimations) return;\n\n                    const rect = el.getBoundingClientRect();\n                    const x = e.clientX - rect.left;\n                    const y = e.clientY - rect.top;\n                    const centerX = rect.width / 2;\n                    const centerY = rect.height / 2;\n\n                    if (enableTilt) {\n                      const rotateX = ((y - centerY) / centerY) * -10;\n                      const rotateY = ((x - centerX) / centerX) * 10;\n\n                      gsap.to(el, {\n                        rotateX,\n                        rotateY,\n                        duration: 0.1,\n                        ease: 'power2.out',\n                        transformPerspective: 1000\n                      });\n                    }\n\n                    if (enableMagnetism) {\n                      const magnetX = (x - centerX) * 0.05;\n                      const magnetY = (y - centerY) * 0.05;\n\n                      gsap.to(el, {\n                        x: magnetX,\n                        y: magnetY,\n                        duration: 0.3,\n                        ease: 'power2.out'\n                      });\n                    }\n                  };\n\n                  const handleMouseLeave = () => {\n                    if (shouldDisableAnimations) return;\n\n                    if (enableTilt) {\n                      gsap.to(el, {\n                        rotateX: 0,\n                        rotateY: 0,\n                        duration: 0.3,\n                        ease: 'power2.out'\n                      });\n                    }\n\n                    if (enableMagnetism) {\n                      gsap.to(el, {\n                        x: 0,\n                        y: 0,\n                        duration: 0.3,\n                        ease: 'power2.out'\n                      });\n                    }\n                  };\n\n                  const handleClick = e => {\n                    if (!clickEffect || shouldDisableAnimations) return;\n\n                    const rect = el.getBoundingClientRect();\n                    const x = e.clientX - rect.left;\n                    const y = e.clientY - rect.top;\n\n                    const maxDistance = Math.max(\n                      Math.hypot(x, y),\n                      Math.hypot(x - rect.width, y),\n                      Math.hypot(x, y - rect.height),\n                      Math.hypot(x - rect.width, y - rect.height)\n                    );\n\n                    const ripple = document.createElement('div');\n                    ripple.style.cssText = `\n                      position: absolute;\n                      width: ${maxDistance * 2}px;\n                      height: ${maxDistance * 2}px;\n                      border-radius: 50%;\n                      background: radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%);\n                      left: ${x - maxDistance}px;\n                      top: ${y - maxDistance}px;\n                      pointer-events: none;\n                      z-index: 1000;\n                    `;\n\n                    el.appendChild(ripple);\n\n                    gsap.fromTo(\n                      ripple,\n                      {\n                        scale: 0,\n                        opacity: 1\n                      },\n                      {\n                        scale: 1,\n                        opacity: 0,\n                        duration: 0.8,\n                        ease: 'power2.out',\n                        onComplete: () => ripple.remove()\n                      }\n                    );\n                  };\n\n                  el.addEventListener('mousemove', handleMouseMove);\n                  el.addEventListener('mouseleave', handleMouseLeave);\n                  el.addEventListener('click', handleClick);\n                }}\n              >\n                <div className=\"card__header flex justify-between gap-3 relative text-white\">\n                  <span className=\"card__label text-base\">{card.label}</span>\n                </div>\n                <div className=\"card__content flex flex-col relative text-white\">\n                  <h3 className={`card__title font-normal text-base m-0 mb-1 ${textAutoHide ? 'text-clamp-1' : ''}`}>\n                    {card.title}\n                  </h3>\n                  <p className={`card__description text-xs leading-5 opacity-90 ${textAutoHide ? 'text-clamp-2' : ''}`}>\n                    {card.description}\n                  </p>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </BentoCardGrid>\n    </>\n  );\n};\n\nexport default MagicBento;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}