Showcase
Infinite Physics Gallery
Infinite 2-D draggable grid with physics-based momentum, edge scrolling, and support for mixed image/video cells. Framework-agnostic Custom Element.
Preview
Drag or scroll to explore the infinite grid. The edge of the viewport pulls the gallery toward it when idle.
Installation
pnpm dlx motion-blocks add infinite-physics-galleryUsage
---import "@/components/motion-blocks/infinite-physics-gallery-element.ts";--- <motion-infinite-physics-gallery items='[{"type":"image","src":"/1.jpg"},{"type":"image","src":"/2.jpg"}]' cell-width="320" cell-height="400" class="h-[480px] w-full rounded-2xl overflow-hidden"></motion-infinite-physics-gallery>API Reference
| Attribute | Type | Default |
|---|---|---|
items JSON array of media items: [{type:"image|video",src:"...",alt:"..."}]. | string | "[]" |
cell-width Cell width in pixels. | number | 320 |
cell-height Cell height in pixels. | number | 400 |
gap Gap between cells in pixels. | number | 24 |
friction Base inertia friction (0–1). | number | 0.95 |
wheel-speed Wheel speed multiplier. | number | 2 |
edge-threshold Edge auto-scroll threshold in pixels. | number | 100 |
edge-scroll-speed Edge auto-scroll speed. | number | 2 |