# Animated Feature Spotlight 3D

> The AnimatedFeatureSpotlight3D component is a visually dynamic, Framer Motion–powered spotlight section designed to highlight key features or products—like a gift showcase—with smooth entrance animations and an interactive 3D hover effect. It combines expressive typography, subtle motion, and layered depth to create a premium visual experience. On hover, the featured image tilts naturally in 3D space with a soft shadow beneath it, giving a realistic floating impression. Built with Shadcn UI, Tailwind CSS, and Framer Motion, this component is fully responsive, reusable, and ideal for landing pages, marketing sections, or feature highlights where visual engagement matters most.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/animated-feature-spotlight3d

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/animated-feature-spotlight3d?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