Holographic Card
A trading-card holo effect — iridescent foil, specular glare, and glitter that tilt and shift with the pointer or device gyroscope.
GodUI
Move your pointer across the card — the foil, glare, and glitter catch the light as it tilts.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/holographic-card.json"The pointer position is normalized over the card and spring-mapped to rotateX
/ rotateY on a perspective container. The same value drives a CSS variable
that shifts the iridescent foil, the glitter mask, and a specular glare — so
the whole surface reacts to a single gesture, like a real foil card catching the
light. Set gyroscope to drive the tilt from the device on touch screens. It
eases back to rest on leave, and renders as a still card under
prefers-reduced-motion.
Usage
import { HolographicCard } from "@/components/godui/holographic-card";<HolographicCard variant="rainbow" className="w-72 p-6">
<h3>Title</h3>
<p>Body copy</p>
</HolographicCard>Colorways
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "rainbow" | "aurora" | "galaxy" | "gold" | "rainbow" | Foil colorway. |
maxTilt | number | 14 | Maximum tilt in degrees toward the pointer. |
glare | boolean | true | Render a specular glare that tracks the pointer. |
sparkle | boolean | true | Overlay a fine glitter mask for a holo-flake finish. |
gyroscope | boolean | false | Drive the tilt from the device gyroscope on touch. |
HolographicCard also forwards every standard <div> attribute to the root element.