Parallax

1import { Parallax, ParallaxLayer } from "@/components/motion/parallax"23const CARDS = [4  {5    "title": "Token ready",6    "body": "Quiet surfaces that still feel alive when you move through them.",7    "image": "/assets/brand/demos/attachments/attachment-1.png"8  },9  {10    "title": "Soft depth",11    "body": "Images lag behind the scroll so the stack feels layered, not flat.",12    "image": "/assets/brand/demos/attachments/attachment-2.png"13  },14  {15    "title": "Keep it tight",16    "body": "Small speed values stay calm. Push them only when the moment needs it.",17    "image": "/assets/brand/demos/attachments/attachment-3.png"18  },19  {20    "title": "Ship the cut",21    "body": "A long frame of cards, each with its own slow image drift.",22    "image": "/assets/brand/demos/attachments/attachment-4.png"23  },24  {25    "title": "Stay composed",26    "body": "Scroll the list. Watch the pictures move a little slower than the copy.",27    "image": "/assets/brand/demos/attachments/attachment-5.png"28  }29]3031export function Example() {32  return (33    <Parallax34      strength={1}35      className="h-[38rem] w-full"36    >37      <div className="mx-auto flex w-full max-w-[300px] flex-col gap-14 py-12">38        {CARDS.map((card) => (39          <article40            key={card.title}41            className="overflow-hidden rounded-xl border border-border bg-background"42          >43            <div className="relative aspect-[4/3] overflow-hidden">44              <ParallaxLayer45                speed={0.45}46                className="absolute inset-0"47              >48                <img49                  src={card.image}50                  alt=""51                  className="size-full object-cover"52                />53              </ParallaxLayer>54            </div>55            <div className="px-3.5 py-3.5">56              <h3 className="text-sm font-medium tracking-wide">57                {card.title}58              </h3>59              <p className="mt-1 text-xs tracking-wide text-muted-foreground">60                {card.body}61              </p>62            </div>63          </article>64        ))}65      </div>66    </Parallax>67  )68}