Spotlight Card
Your first document
Box component
Lorem Ipsum Product
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Lorem Ipsum Product
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Lorem Ipsum Product
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Props
Prop
Type
Usage
import { Box } from "@/Box";
<div style={{ minHeight: "300px" }}>
<Flex spacing={remToPx(1)} className="h-full">
<SpotlightCard>
<Box className="max-w-xs w-full py-2 px-4">
<H5>Lorem Ipsum Product</H5>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.</P>
</Box>
</SpotlightCard>
<SpotlightCard colorGlow="glowPurple">
<Box className="max-w-xs w-full py-2 px-4">
<H5>Lorem Ipsum Product</H5>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.</P>
</Box>
</SpotlightCard>
<SpotlightCard colorGlow="glowTeal">
<Box className="max-w-xs w-full py-2 px-4">
<H5>Lorem Ipsum Product</H5>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.</P>
</Box>
</SpotlightCard>
</Flex>
</div>;Code
Interface code
import { ReactNode } from 'react'/** * Props para el componente SpotlightCardProps */export interface SpotlightCardProps { /** Contenido del contenedor flex. */ children?: ReactNode colorGlow?: 'glowBlwe' | 'glowPurple' | 'glowTeal'}Component Code
import { cn } from '@/lib/cn'import { useEffect, useRef } from 'react'import { SpotlightCardProps } from './spotlightCard.types'import './styles.css'export function SpotlightCard({ colorGlow = 'glowBlwe', children }: SpotlightCardProps) { const cardRef = useRef<HTMLDivElement>(null) const glowRef = useRef<HTMLDivElement>(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { const card = cardRef.current if (!card) return const glow = glowRef.current const rect = card.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top if (glow) { glow.style.left = `${x}px` glow.style.top = `${y}px` } card.style.setProperty('--xPos', `${x}px`) card.style.setProperty('--yPos', `${y}px`) } document.addEventListener('mousemove', handleMouseMove) return () => { document.removeEventListener('mousemove', handleMouseMove) } }, []) return ( <div ref={cardRef} className="relative p-0.75 bg-neutral-900 rounded-[0.75em] overflow-hidden"> <div className="relative w-auto h-full rounded-[0.813em] z-10 bg-neutral-900">{children}</div> <div ref={glowRef} className={cn( colorGlow, 'absolute w-125 h-125 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none blur-2xl mix-blend-lighten', )} style={{ left: -500, top: -500 }} /> </div> )}CSS
.glowBlwe { background: radial-gradient( 300px circle, rgba(96, 165, 250, 1) 0%, rgba(96, 165, 250, 0.65) 20%, rgba(96, 165, 250, 0.3) 40%, rgba(96, 165, 250, 0.08) 60%, rgba(96, 165, 250, 0.02) 75%, transparent 100% );}.glowPurple { background: radial-gradient( 300px circle, rgba(192, 132, 252, 1) 0%, rgba(192, 132, 252, 0.65) 20%, rgba(192, 132, 252, 0.3) 40%, rgba(192, 132, 252, 0.08) 60%, rgba(192, 132, 252, 0.02) 75%, transparent 100% );}.glowTeal { background: radial-gradient( 300px circle, rgba(52, 211, 153, 1) 0%, rgba(52, 211, 153, 0.65) 20%, rgba(52, 211, 153, 0.3) 40%, rgba(52, 211, 153, 0.08) 60%, rgba(52, 211, 153, 0.02) 75%, transparent 100% );}