Spiral Gallery
A 3D helix of curved image tiles you scroll through. Tiles are bent into shallow arcs and stacked along a descending coil; the whole spiral idles with a slow rotation, picks up spin from scroll velocity, and tilts toward the cursor with eased parallax while the camera descends through it. A small facing shader brightens tiles as they turn to face you. Three.js + Lenis; owns its scroll container so it embeds anywhere.
npx shadcn@latest add https://ui.aryank.space/r/spiral-gallery.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 12 Compronents-hosted JPGs | Images cycled around the curved helix tiles. |
| heading / aboutText | string | hero headline / about line | Copy in the hero and about sections. |
| heroBackground / aboutBackground | string | "#242424" / "#171717" | Section backdrops behind the transparent 3D canvas. |
| textColor | string | "#d2d2d2" | Heading color in both sections. |
| embedded | boolean | true | Own an internal scroll container (true) or use the window scroll (false). |
heroBackground / aboutBackgroundcolorThe two section backgrounds the transparent canvas sits over.
textColorcolorHeading ink in the hero and about panels.
heading / aboutTexttextThe justified hero headline and the centered about line.
imagesasset-urlTwelve images, hosted through https://ui.aryank.space/assets/spiral-gallery/img-1.jpg and the numbered set.
threelenis