# Distributed Cards 2 Demo

> Another Demo showing distributed cards component.

A shadcn/ui block from the [@systaliko-ui](https://systaliko-ui.vercel.app) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/systaliko-ui/distributed-cards-2-demo).

- Page, with a live preview: https://shadcn.exchange/r/systaliko-ui/distributed-cards-2-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/systaliko-ui/distributed-cards-2-demo-light-271b4565793ac82b.png
- Registry item: https://systaliko-ui.vercel.app/r/distributed-cards-2-demo.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://systaliko-ui.vercel.app/r/distributed-cards-2-demo.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: `https://systaliko-ui.vercel.app/r/distributed-cards-2`

## Files

### `registry/demo/scroll-animations/distributed-cards-2/index.tsx`

```tsx
import {
  DistributedCardCell,
  DistributedCards,
  DistributedCardsContainer,
} from '@/components/systaliko-ui/scroll-animations/distributed-cards';
import Image from 'next/image';

const CARDS = [
  {
    id: 'distributed-card-1',
    imageUrl:
      'https://images.unsplash.com/photo-1557409518-691ebcd96038?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    startX: '100%',
    startY: '50%',
  },
  {
    id: 'distributed-card-2',
    imageUrl:
      'https://images.unsplash.com/photo-1513407030348-c983a97b98d8?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    startX: '0%',
    startY: '50%',
  },
  {
    id: 'distributed-card-3',
    imageUrl:
      'https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?q=80&w=1484&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    startX: '-100%',
    startY: '50%',
  },
  {
    id: 'distributed-card-4',
    imageUrl:
      'https://images.unsplash.com/photo-1542051841857-5f90071e7989?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    startX: '100%',
    startY: '-50%',
  },
  {
    id: 'distributed-card-5',
    imageUrl:
      'https://images.unsplash.com/photo-1677652704119-1497d836c396?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    startX: '0%',
    startY: '-50%',
  },
  {
    id: 'distributed-card-6',
    imageUrl:
      'https://images.unsplash.com/photo-1525230071276-4a87f42f469e?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    startX: '-100%',
    startY: '-50%',
  },
];
export function DistributedCards2Demo() {
  return (
    <DistributedCards className="w-full">
      <DistributedCardsContainer className="h-screen flex items-center justify-center overflow-hidden">
        <div className="grid w-full h-full md:h-auto md:aspect-video max-w-5xl grid-cols-3 grid-rows-2 justify-center items-center gap-4 py-16 px-8">
          {CARDS.map((card, i) => {
            const start = i / (CARDS.length + 1);
            const end = (i + 1) / (CARDS.length + 1);
            const range = [start, end];
            return (
              <DistributedCardCell
                className="relative size-full shadow-xl rounded border border-border/20 overflow-hidden"
                inputRange={range}
                yRange={[card.startY, '0%']}
                xRange={[card.startX, '0%']}
                rotateRange={[0, 0]}
                key={card.id}
              >
                <Image
                  src={card.imageUrl}
                  fill
                  alt={'tokyo'}
                  className="object-cover size-full"
                  sizes="(max-width: 768px) 80vw, 768px"
                />
              </DistributedCardCell>
            );
          })}
        </div>
      </DistributedCardsContainer>
    </DistributedCards>
  );
}
```