{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "MagicBento-JS-CSS", "title": "MagicBento", "description": "Interactive bento grid tiles expand + animate with various options.", "type": "registry:component", "files": [ { "type": "registry:file", "path": "MagicBento.css", "target": "@components/MagicBento.css", "content": ":root {\n --hue: 27;\n --sat: 69%;\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 --border-color: #2F293A;\n --background-dark: #120F17;\n color-scheme: light dark;\n}\n\n.card-grid {\n display: grid;\n gap: 0.5em;\n padding: 0.75em;\n max-width: 54em;\n font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);\n}\n\n.magic-bento-card {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n aspect-ratio: 4/3;\n min-height: 200px;\n width: 100%;\n max-width: 100%;\n padding: 1.25em;\n border-radius: 20px;\n border: 1px solid var(--border-color);\n background: var(--background-dark);\n font-weight: 300;\n overflow: hidden;\n transition: all 0.3s ease;\n\n --glow-x: 50%;\n --glow-y: 50%;\n --glow-intensity: 0;\n --glow-radius: 200px;\n}\n\n.magic-bento-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n}\n\n.magic-bento-card__header,\n.magic-bento-card__content {\n display: flex;\n position: relative;\n color: var(--white);\n}\n\n.magic-bento-card__header {\n gap: 0.75em;\n justify-content: space-between;\n}\n\n.magic-bento-card__content {\n flex-direction: column;\n}\n\n.magic-bento-card__label {\n font-size: 16px;\n}\n\n.magic-bento-card__title,\n.magic-bento-card__description {\n --clamp-title: 1;\n --clamp-desc: 2;\n}\n\n.magic-bento-card__title {\n font-weight: 400;\n font-size: 16px;\n margin: 0 0 0.25em;\n}\n\n.magic-bento-card__description {\n font-size: 12px;\n line-height: 1.2;\n opacity: 0.9;\n}\n\n.magic-bento-card--text-autohide .magic-bento-card__title,\n.magic-bento-card--text-autohide .magic-bento-card__description {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.magic-bento-card--text-autohide .magic-bento-card__title {\n -webkit-line-clamp: var(--clamp-title);\n line-clamp: var(--clamp-title);\n}\n\n.magic-bento-card--text-autohide .magic-bento-card__description {\n -webkit-line-clamp: var(--clamp-desc);\n line-clamp: var(--clamp-desc);\n}\n\n@media (max-width: 599px) {\n .card-grid {\n grid-template-columns: 1fr;\n width: 90%;\n margin: 0 auto;\n padding: 0.5em;\n }\n\n .magic-bento-card {\n width: 100%;\n min-height: 180px;\n }\n}\n\n@media (min-width: 600px) {\n .card-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .card-grid {\n grid-template-columns: repeat(4, 1fr);\n }\n\n .magic-bento-card:nth-child(3) {\n grid-column: span 2;\n grid-row: span 2;\n }\n\n .magic-bento-card:nth-child(4) {\n grid-column: 1 / span 2;\n grid-row: 2 / span 2;\n }\n\n .magic-bento-card:nth-child(6) {\n grid-column: 4;\n grid-row: 3;\n }\n}\n\n/* Border glow effect */\n.magic-bento-card--border-glow::after {\n content: '';\n position: absolute;\n inset: 0;\n padding: 6px;\n background: radial-gradient(\n var(--glow-radius) circle at var(--glow-x) var(--glow-y),\n rgba(132, 0, 255, calc(var(--glow-intensity) * 0.8)) 0%,\n rgba(132, 0, 255, calc(var(--glow-intensity) * 0.4)) 30%,\n transparent 60%\n );\n border-radius: inherit;\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n 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.magic-bento-card--border-glow:hover::after {\n opacity: 1;\n}\n\n.magic-bento-card--border-glow:hover {\n box-shadow:\n 0 4px 20px rgba(46, 24, 78, 0.4),\n 0 0 30px var(--purple-glow);\n}\n\n.particle-container {\n position: relative;\n overflow: hidden;\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(132, 0, 255, 0.2);\n border-radius: 50%;\n z-index: -1;\n}\n\n.particle-container:hover {\n box-shadow:\n 0 4px 20px rgba(46, 24, 78, 0.2),\n 0 0 30px var(--purple-glow);\n}\n\n/* Global spotlight styles */\n.global-spotlight {\n mix-blend-mode: screen;\n will-change: transform, opacity;\n z-index: 200 !important;\n pointer-events: none;\n}\n\n.bento-section {\n position: relative;\n user-select: none;\n}\n" }, { "type": "registry:component", "path": "MagicBento.jsx", "content": "import { useRef, useEffect, useCallback, useState } from 'react';\nimport { gsap } from 'gsap';\nimport './MagicBento.css';\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 \n {children}\n \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('.magic-bento-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('.magic-bento-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
\n {children}\n
\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 {enableSpotlight && (\n \n )}\n\n \n {cardData.map((card, index) => {\n const baseClassName = `magic-bento-card ${textAutoHide ? 'magic-bento-card--text-autohide' : ''} ${enableBorderGlow ? 'magic-bento-card--border-glow' : ''}`;\n const cardProps = {\n className: baseClassName,\n style: {\n backgroundColor: card.color,\n '--glow-color': glowColor\n }\n };\n\n if (enableStars) {\n return (\n \n
\n
{card.label}
\n
\n
\n

{card.title}

\n

{card.description}

\n
\n \n );\n }\n\n return (\n {\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 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 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
\n
{card.label}
\n
\n
\n

{card.title}

\n

{card.description}

\n
\n \n );\n })}\n \n \n );\n};\n\nexport default MagicBento;\n" } ], "registryDependencies": [], "dependencies": [ "gsap@^3.13.0" ] }