SpotlightGrid (Cuadrícula con Efecto Spotlight)

Esta sección muestra una vista previa del componente SpotlightGrid.

En esta guía presentamos el componente SpotlightGrid, una cuadrícula con efecto spotlight radial que sigue al ratón en cada tarjeta.

Vista Previa

R

Realtime

Sync en 12ms con WebSocket

Hover me →
S

Secure

E2E encryption by default

Hover me →
F

Fast

Edge deployed en 35 regiones

Hover me →
S

Scalable

Auto-scale a 1M rps

Hover me →

Código

import "@elizabthpazp/intera-ui/dist/globals.css";

import { SpotlightGrid } from "@elizabthpazp/intera-ui";

export default function Home() {
  return (
    <SpotlightGrid
      darkMode
      items={[
        { id:"1", title:"Realtime", content:"Sync en 12ms" },
        { id:"2", title:"Secure", content:"E2E encryption" },
      ]}
    />
  );
}
// Cada tarjeta rastrea su propio ratón (no la cuadrícula), radial-gradient 500px interior + 400px borde

Detalles del Componente

El componente SpotlightGrid consta de:

  • Cuadrícula grid-cols-1 sm:grid-cols-2 con gap-4 p-4 rounded-2xl.
  • SpotlightCard rastrea su propio mouse (x,y) y hovered — radial-gradient 500px interior + 400px borde.
  • Spotlight de borde vía maskComposite: exclude + padding:1px.

Propiedades

Nombre de PropTipoPor DefectoDescripción
itemsArray<{id,title,content,icon?}>4 por defectoElementos de la cuadrícula.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea.

Responsivo: grid-cols-1 sm:grid-cols-2, p-4 rounded-2xl, bg-gray-950 vs bg-gray-50.

Características

  • Seguimiento del ratón por tarjeta — sin listener global en la cuadrícula.
  • Doble radial-gradient (interior + borde) para profundidad.
  • Personalizable vía className/style con cn().
  • Ubicación: src/components/interactive/SpotlightGrid.jsx.