# 3D Interactive Card Gallery

> Features This advanced 3D interactive card gallery includes:  3D Perspective Effects:  Dynamic rotation based on mouse position Perspective transformations that respond to user interaction Parallax depth effects between card elements Advanced Animations:  Smooth transitions between cards with cubic-bezier easing Card scaling and position animations Floating particles in the background Pulse animations on interactive elements Glassmorphism & Modern UI:  Backdrop blur effects Semi-transparent overlays Dynamic gradient backgrounds that follow mouse movement Noise texture overlay for added depth Responsive Design:  Adapts between horizontal carousel on desktop Vertical stacking on mobile devices Fluid typography and spacing Interactive Elements:  Navigation controls with visual feedback Progress indicators Hover state animations Click interactions to change the active card Visual Polish:  Custom gradient overlays unique to each card Dynamic depth-of-field effect (blur on inactive cards) Atmospheric lighting that responds to mouse position Category badges with glassmorphism effect To use this component, make sure to install Framer Motion:  bash npm install framer-motion This component represents a highly polished, production-ready UI element that combines advanced CSS techniques with modern React patterns to create an immersive, interactive experience.

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@dhileepkumargm/components/3d-interactive-card-gallery

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/3d-interactive-card-gallery?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt