# M scroll reveal 1

> Feature cards — three cards slide up and fade in with staggered delays on scroll

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/m-scroll-reveal-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/m-scroll-reveal-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/m-scroll-reveal-1-light-8338ffbab14a3cb2.png
- Registry item: https://ui.cnippet.dev/r/m-scroll-reveal-1.json
- Categories: scroll reveal
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/m-scroll-reveal-1.json
```

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

## Dependencies

- Registry items: `@cnippet/scroll-reveal`

## Files

### `registry/default/motion-variants/m-scroll-reveal-1.tsx`

```tsx
import { ScrollReveal } from "@/registry/default/motion/scroll-reveal";

const cards = [
  {
    description: "Composable components that snap together cleanly.",
    icon: "◈",
    title: "Composable",
  },
  {
    description: "Every animation respects prefers-reduced-motion.",
    icon: "⬡",
    title: "Accessible",
  },
  {
    description: "Zero runtime overhead — pure CSS where possible.",
    icon: "◎",
    title: "Performant",
  },
];

export default function ScrollRevealCards() {
  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
        {cards.map((card, i) => (
          <ScrollReveal
            key={card.title}
            transition={{ delay: i * 0.12, duration: 0.5, ease: "easeOut" }}
            variants={{
              hidden: { opacity: 0, y: 24 },
              visible: { opacity: 1, y: 0 },
            }}
            viewOptions={{ amount: 0.3 }}
          >
            <div className="rounded-xl border border-border bg-card p-5">
              <p className="mb-2 text-2xl">{card.icon}</p>
              <h3 className="font-semibold text-foreground">{card.title}</h3>
              <p className="mt-1 text-muted-foreground text-sm">
                {card.description}
              </p>
            </div>
          </ScrollReveal>
        ))}
      </div>
    </div>
  );
}
```