saturation/uiDiagonal Marquee
Infinite diagonal scrolling marquee with multiple rows of image cards moving in alternating directions.
Budget Templates
Applying for the credit?
Use our budget templates to organize qualified expenses into the proper chart of accounts.
Browse TemplatesFeatures
- True circular loop — Uses useAnimationFrame for seamless wrapping
- Multi-row — Configurable number of rows with alternating directions
- Seeded shuffle — Each row shows different order without hydration issues
- Viewport-aware — Pauses animation when offscreen
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DiagonalMarqueeItem[] | - | Array of items with id, src, and alt |
| rows | number | 3 | Number of scrolling rows |
| cardWidth | number | 110 | Card width in pixels |
| gap | number | 10 | Gap between cards in pixels |
| rowGap | number | 12 | Gap between rows in pixels |
| speed | number | 20 | Base scroll speed in px/sec |
| angle | number | -15 | Rotation angle in degrees |