# Shirt Parallax Card

> The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s title, description, price, and a call-to-action button, while the shirt image sits in the top-right corner, outside the card boundary, instantly drawing attention. The shirt gently bounces with a subtle idle animation, giving the design a lively, premium feel. On hover, the entire card tilts with a parallax effect, the card itself scales down slightly with a soft shadow, and the shirt scales up and lifts forward with a stronger shadow, creating a dynamic push-pull motion that emphasizes the product. This combination of smooth 3D interactions, motion design, and layered layout makes the component ideal for highlighting featured products, running promotional ads, or enhancing landing pages with a visually rich, engaging showcase.

- 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/shirt-parallax-card

## Install

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