# 3D cards Slider

> 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

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: no-license
- Tags: Carousel, Glassmorphism, Gradient, Parallax, 3D Card
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@dhileepkumargm/components/3d-cards-slider

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/3d-cards-slider?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 · More like this: https://21st.dev/community/components/s/carousel.md