Pixelated Carousel
An image carousel with a unique pixelated transition effect. Images dissolve into pixels and reassemble for the next slide.
Component preview
Install using CLI
npx shadcn@latest add "https://www.obsidianui.dev/r/pixelated-carousel.json"Install Manually
1
Install dependencies
npm install motion
2
Copy the source code
Copy into components/block/pixelated-carousel.tsx
Note: Install via CLI for the full pixelation algorithm implementation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | - | Array of image URLs |
| pixelSize | number | 100 | Size of pixels in transition |
| animationDelayStep | number | 0.02 | Delay between pixel animations |
| pixelTransitionDuration | number | 0.1 | Duration of each pixel transition |
Last updated on