# Hero Preview Walls

> This component is a responsive Hero Section with an animated Card Stack overlay, designed to showcase key features or testimonials in a dynamic and visually engaging way. Built with React, Tailwind CSS, and Framer Motion, it combines a sleek background image with a rotating stack of rectangular cards that automatically cycle every few seconds. Each card contains a title, descriptive paragraph, and illustrative image, along with a footer caption for context. The layout fully supports dark and light themes, maintaining high readability and aesthetic balance across devices. Ideal for landing pages, portfolio sections, or product showcases, this component highlights modern design principles—clean typography, smooth motion, and visual hierarchy—while remaining modular, customizable, and easy to integrate into any Next.js project.

- 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/hero-preview-walls

## Install

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