Holographic Foil Card
A production-ready holographic foil card component for your Next.js application. Accessible, customizable, and built with modern standards.
Holographic Foil Card
A highly interactive card component that mimics the look of a premium trading card with a holographic foil finish. As you move your mouse, the card tilts in 3D space, and a dynamic light gradient shifts across the surface, creating a realistic shimmering effect.
Key Features
- Realistic 3D Tilt: Calculates mouse position relative to the card center to apply rotation.
- Holographic Shader Effect: Uses CSS radial gradients and mix-blend-modes to create a rainbow foil look.
- Smooth Physics: Powered by Framer Motion springs for fluid, responsive movement.
- Dynamic Lighting: A secondary glare layer follows the mouse for added depth.
- NFT Showcases
- Premium Product Cards
- Gaming Profiles
- Achievements
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to display inside the card. |
| className | string | - | Additional CSS classes. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.