Box 3D

import { Box3D } from "@sigil-ui/components";

<Box3D className="w-full max-w-sm p-8" hoverLift><strong>Token-driven surfaces</strong><p>Move over the panel to explore its depth.</p></Box3D>

<Box3D variant="container" className="w-40 h-28"><div className="p-3">Container</div></Box3D>
<Box3D variant="card" className="w-40 h-28"><div className="p-3">Card</div></Box3D>
<Box3D variant="panel" className="w-40 h-28"><div className="p-3">Panel</div></Box3D>

<Box3D hoverLift depth={24} className="w-48 h-32">
  <div className="p-4">Hover me</div>
</Box3D>

<Box3D tiltX={-15} tiltY={30} perspective={600} depth={30} className="w-48 h-32">
  <div className="p-4">Tilted</div>
</Box3D>