127 Components
Tilt Credit Card 3D
CardsRevolut and Apple Card-inspired premium 3D metal card with cursor-tilt gyroscope physics, rainbow holographic foil reflection, gold EMV chip, contactless RFID waves, and dual-side flip mechanics.
Vault 3D Metal CardEMV Certified
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/tilt-credit-card3-d.json"
Props
TypeScript props supported by <TiltCreditCard3D />.
| Prop | Type | Default | Description |
|---|---|---|---|
| cardHolder | string | "ALEXANDER VANCE" | Name embossed on the front of the credit card. |
| cardNumber | string | "4532 8901 2345 7892" | 16-digit card number displayed on the card surface. |
| expiry | string | "09/29" | Expiration date in MM/YY format. |
| cvv | string | "842" | 3-digit card verification value on the reverse signature strip. |
| theme | "titanium" | "obsidian" | "rosegold" | "holographic" | "titanium" | Visual texture and metallic gradient preset. |
| className | string | — | Additional CSS classes to apply to the root container. |
Key Features
- Hooke's Law spring physics for cursor tilt tracking with realistic angular dampening.
- Dynamic rainbow prism holographic glare layer responding to pointer coordinates.
- Dual-sided card view with flip mechanics showing magnetic stripe, signature strip, and CVV.
- Debossed typography with customizable cardholder name and sensitive number masking.
- Four distinct material finishes: Titanium Metal, Obsidian Black, Rose Gold, and Holo Prism.
Keyboard & Accessibility
- Keyboard accessible flip action for accessing back-of-card security details.
- Masked digits by default for privacy, with toggleable screen-reader announcements.
- Respects reduced-motion preferences by dampening rotational angles.