PerspectiveCard (Tarjeta 3D con Perspectiva)

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

En esta guía presentamos el componente PerspectiveCard, una tarjeta 3D que se inclina con el movimiento del ratón usando preserve-3d.

Vista Previa

3D PERSPECTIVE

Hover para profundidad

Código

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

import { PerspectiveCard } from "@elizabthpazp/intera-ui";
import { Rocket } from "lucide-react";

export default function Home() {
  return (
    <PerspectiveCard darkMode className="w-80 h-[420px]">
      <Rocket size={48}/>
      <h3 className="font-black">3D PERSPECTIVE</h3>
      <p className="text-xs opacity-50">Hover para profundidad</p>
    </PerspectiveCard>
  );
}

Detalles del Componente

El componente PerspectiveCard consta de:

  • Una tarjeta que rota en rotateX/rotateY vía useMotionValue + useSpring.
  • Profundidad 3D con transformStyle: "preserve-3d" y resplandor interior.
  • Se restablece al hacer mouseLeave.

Propiedades

Nombre de PropTipoPor DefectoDescripción
childrenReactNode-Contenido dentro de la tarjeta.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea (combinados con transformaciones 3D).

Características

  • Inclinación 3D suave con Framer Motion useTransform (±17.5deg).
  • Responsivo w-64 h-80 sm:h-96 max-w-[90vw] con rounded-3xl.
  • Personalizable vía className/style.
  • Ubicación: src/components/interactive/PerspectiveCard.jsx.