# 3D Feature Cards

> Features of this Component 3D Interactive Card System:  Cards rotate based on mouse position for a realistic 3D effect Perspective transforms create depth and immersion Advanced Animation Effects:  Smooth transitions between active states Floating background elements create depth Gradient pulse animations add visual interest Progress bar animations for active cards Responsive Design:  Adapts from single column on mobile to 4-column grid on large screens Maintains visual impact at all screen sizes Modern UI Elements:  Glassmorphism with backdrop blur effects Gradient highlights and shadows Micro-interactions on hover and click Auto-advancing Carousel:  Cards automatically cycle every 5 seconds Manual control via indicator dots and card clicking To use this component, you'll need to:  Install Framer Motion: npm install framer-motion Include the additional CSS or convert it to Tailwind classes Import the component into your React application This design provides a premium, cutting-edge look that combines modern UI trends with thoughtful interactions and animations.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/3d-feature-cards?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