Showcase
Radial Gallery
Circular rotating image gallery. Items are evenly spaced around a ring that spins continuously. Framework-agnostic Custom Element.
Preview
Images orbit along a circular ring. Set offset to peek it from below the fold.
Installation
pnpm dlx motion-blocks add radial-galleryUsage
---import "@/components/motion-blocks/radial-gallery-element.ts";--- <motion-radial-gallery items='[{"src":"/img/1.jpg"},{"src":"/img/2.jpg"}]' radius="480" duration="24" element-size="160" class="h-[360px] w-full overflow-hidden"></motion-radial-gallery>API Reference
| Attribute | Type | Default |
|---|---|---|
items JSON array of image objects with src and alt properties. | string | "[]" |
radius Radius of the circle in pixels. | number | 600 |
duration Duration of one full rotation in seconds. | number | 20 |
reversed Rotate counter-clockwise. | boolean | false |
offset Extra pixels to offset the ring center below the visible area. | number | 0 |
gap Gap between items in pixels. | number | 0 |
element-size Estimated item width in pixels for circumference calculations. | number | 100 |