Curve Gallery
A scroll-driven 3D image field inspired by gaspoorf's Curve Gallery. Hundreds of photographs sit along a closed Catmull-Rom path while the camera travels through them; nearby frames swell with a cubic focus falloff, five path controls reshape the same field, and wheel, drag, keyboard, or autoplay share one eased progress value. One self-contained Three.js component using existing hosted images.
npx shadcn@latest add https://ui.aryank.space/r/curve-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[] | Twelve existing BLANK-hosted photographs | Textures distributed repeatedly across the image field. |
| background / foreground | string / string | "#f2f0eb" / "#171715" | Scene fog and minimal interface colors. |
| planeCount | number | 320 | Number of image planes distributed along the curve. |
| focusDistance / maxScale / cameraOffset | number / number / number | 4.8 / 11 / 9.5 | Focus radius, scale peak, and lens distance from the path. |
| autoplay / autoplayDuration | boolean / number | false / 12 | Initial motion mode and seconds per complete path lap. |
| initialPath / pathLabels | number / string[] | 0 / 01 through 05 | Initial curve and the five selector labels. |
| brand / label | string / string | "BLANK" / "Curve archive" | Small fixed captions framing the gallery. |
background / foregroundcolorCanvas fog color and the minimal interface color.
focusDistance / maxScaletextRadius of the focus zone and the maximum scale of its nearest frame.
imagesasset-urlThe existing 12-image Scroll Tunnel set, reused across the curve field.
pathLabels / brand / labeltextCurve selector labels and the two corner captions.
three