# Media card

> An image card with a soft gradient fade and caption.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/spot-03).

- Page, with a live preview: https://shadcn.exchange/r/flx/spot-03
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/spot-03-light-a5b20aa0ff8591cd.png
- Registry item: https://ui.flexnative.com/r/spot-03.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/spot-03.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `motion`

## Files

### `registry/illustrations/spot/spot-03.tsx`

```tsx
'use client'

import { motion, useReducedMotion } from 'motion/react'

export function Spot03() {
  const reduce = useReducedMotion()

  return (
    <div className="relative h-40 w-52 overflow-hidden rounded-2xl border shadow-sm">
      <motion.img
        src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=520&q=80"
        alt=""
        className="h-full w-full object-cover outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
        style={{ willChange: 'transform, opacity' }}
        initial={reduce ? false : { opacity: 0, scale: 1.08 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
      />

      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />

      <div className="absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-3">
        <p className="text-sm font-semibold text-white">Mountain escape</p>
        <p className="text-xs text-white/70">12 photos · 3 days ago</p>
      </div>
    </div>
  )
}
```