GlassStack (Pila con Efecto Cristal 3D)

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

En esta guía presentamos el componente GlassStack, una pila de tarjetas 3D con efecto glassmorphism — haz clic para rotar.

Vista Previa

Interacción Dinámica

Física fluida y animaciones spring con Framer Motion.

Step 1
→

Estética Moderna

Glassmorphism con backdrop-blur y bordes sutiles.

Step 2
→

Customizable

Control total vía className + style + cn() merge.

Step 3
→
Click to Rotate Stack

Código

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

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

export default function Home() {
  const items = [
    { title: "Interacción Dinámica", content: "Física fluida..." },
    { title: "Estética Moderna", content: "Glassmorphism..." },
    { title: "Customizable", content: "Control total..." },
  ];

  return <GlassStack items={items} darkMode className="h-[500px]" />;
}

Detalles del Componente

El componente GlassStack consta de:

  • Una pila de tarjetas con backdrop-blur-xl y profundidad mediante scale/y/z.
  • AnimatePresence para entrada/salida con resorte (spring).
  • Haz clic en cualquier tarjeta o en la pila para rotar a la siguiente tarjeta.

Propiedades

Nombre de PropTipoPor DefectoDescripción
itemsArray<{title, content}>[]Tarjetas a mostrar.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea.

Características

  • Transformaciones 3D con preserve-3d y perspective-1000.
  • Responsivo h-[320px] sm:h-[400px] con w-56 sm:w-64.
  • Estilizado con Tailwind CSS + Framer Motion.
  • Ubicación: src/components/interactive/GlassStack.jsx.