Drag & physics
Infinite canvas
An endless gallery you drag and throw in every direction. Cells recycle, so it stays light.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { InfiniteCanvas } from '@vizzele/react';
<InfiniteCanvas
items={photos}
itemWidth={220}
itemHeight={280}
renderItem={(photo) => <img src={photo.src} alt={photo.alt} draggable={false} />}
style={{ height: '80vh' }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | — | Content; it repeats to fill the plane. |
renderItem | (item: T, i: number) => ReactNode | — | Cell content. |
itemWidth / itemHeight | number | 240 / 300 | Cell size. |
gap | number | 24 | Space between cells. |
stagger | boolean | true | Offset alternate columns (masonry feel). |
Accessibility
- Focusable region; arrow keys pan.
- Cells shrink a touch at high speed — a “lens” that keeps fast throws readable.