Holographic Card
A rainbow holographic-sheen card that shifts with the cursor angle, with 3D tilt.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
As the cursor moves across the card, the card tilts along with it on a spring (rotateX / rotateY) while rainbow holographic bands, glitter particles, and specular highlights flow with the angle; on leave it springs back smoothly into place. A good fit for collectible cards, membership cards, or featured-content showcases.
npx shadcn@latest add "https://webberui.com/r/holographic-card.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<HolographicCard />
Installation
npx shadcn@latest add "https://webberui.com/r/holographic-card.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/holographic-card.
Usage
import { HolographicCard } from "@/components/ui/holographic-card";
<HolographicCard className="w-[300px]" intensity={1.2}>
<div className="bg-slate-900 p-4 text-slate-50">
<h3 className="text-lg font-bold">Startrail Warden · Radiant Dragon</h3>
<p className="text-sm text-slate-400">Legendary rarity collectible card</p>
</div>
</HolographicCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Card content, placed inside the 3D tilt container and beneath the sheen layers |
intensity | number | 1 | Overall effect strength multiplier (0 = off, 1 = standard, 2 = exaggerated), affecting both the tilt amount and the sheen density |
maxTilt | number | 12 | Maximum tilt angle when the cursor is at the card's edge (degrees) |
sparkles | boolean | true | Whether to show the fine glitter particle layer that mimics laser foil |
radius | number | 16 | Card corner radius (px); every sheen layer follows it automatically |
className | string | — | Extra styles, merged into the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the tilt and sheen tracking are disabled and only a static, understated sheen remains
- Every effect layer is
aria-hiddenandpointer-events-none, so it does not interfere with interacting with the content or with screen reader announcements - The tilt is driven by cursor position alone, so keyboard browsing and focusing interactive elements inside the card are unaffected
- The content layer sits above the sheen layers (z-index layering), keeping text contrast and readability intact