# Floating Card Gallery

> Customization Options This component is highly customizable:  Cards Data: Supply your own array of card objects with titles, descriptions, images, etc. Background: Change the backgroundColor prop to use a different Tailwind gradient Accent Color: Modify the accentColor prop to change the glow effect color Maximum Cards: Adjust how many cards to display with the maxCards prop Key Features Explained 3D Perspective Effects: The component uses mouse tracking to create realistic 3D perspective effects with CSS transforms Smooth Animations: Leverages Framer Motion for fluid transitions and animations Expandable Cards: Click on any card to see its expanded view with additional information Floating Particle Background: Creates an immersive atmosphere with subtle animated elements Accessibility: Includes keyboard navigation, ARIA attributes, and focus management Responsive Design: Works beautifully on all device sizes Performance Optimized: Uses React best practices to ensure smooth performance This component would make an excellent centerpiece for portfolios, feature showcases, blog homepages, or any content that deserves a premium visual presentation.

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

## Install

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