# Magazine Scroller — Skecher UI

A polished animated UI primitive for expressive product interfaces.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/magazine-scroller
```

## Dependencies

- None beyond React.

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { MagazineScroller } from "@/components/ui/magazine-scroller";

const covers = [
  { src: "/images/covers/edition-01.jpg", alt: "Edition 01 magazine cover" },
  { src: "/images/covers/edition-02.jpg", alt: "Edition 02 magazine cover" },
  { src: "/images/covers/edition-03.jpg", alt: "Edition 03 magazine cover" },
  { src: "/images/covers/edition-04.jpg", alt: "Edition 04 magazine cover" },
];

export default function MagazineScrollerExample() {
  return (
    <MagazineScroller
      images={covers}
      cardWidth={180}
      cardHeight={264}
      gap={32}
      slices={9}
      height={640}
      wheelSpeed={1.1}
      dragSpeed={1.1}
      bendStrength={82}
      maxBend={96}
      lockWheel={false}
      className="w-full"
    />
  );
}
```

## Source files

- components/ui-components/magazine-scroller.tsx — Magazine Scroller component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/magazine-scroller
- Registry item with complete source: https://skecher-ui.com/r/magazine-scroller.json
- Component AI context: https://skecher-ui.com/llms/magazine-scroller