Atelier UI®

DocsCatalogShader StudioPricingGithub
Docs 1.0.0

tools

  • Browse Catalog
  • Shader Studio
    pro
  • Collage
    new

Documentation

  • How it works
  • Installation
  • MCP

Page Transition (04)

  • Clip Transition
  • Stripe Transition
  • Pixel Transition
  • Band Transition

Components (42)

  • Orbit Gallery
  • Sphere Gallery
  • Glowing Fog
  • Gradient Flow
  • Halftone Glow
  • Scattered Grid
  • Tag Cloud
  • Edge Bounce
  • Fluid Distortion
  • Image Trail
  • Lens Media
  • Liquid Media
  • Magnetic Dot Grid
  • Pixel Media
  • Pixel Trail
  • Dither Cursor
  • Hover Burst
  • Image Bloom
  • Curve Media
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Pixel Scroll
  • Scattered Scroll
  • Elastic Stick
  • Letter Swarm
  • Magnify Trail
  • Stacking Grid
  • Wavy Scroll
  • Pixelated Text
  • Text Bounce
  • Text Fluid
  • Text Scramble
  • Falling Text
  • Text Roll
  • Smooth Scroll
  • Text Split
  • WebGL Image
  • WebGL Provider
  • WebGL Scene
  • WebGL Text
  • WebGL Video
Atelier UI 1.0.0 ©2026
Star on githubBuy me a coffeellms.txt
  1. Docs
  2. /
  3. Components%2Fbackground%2Fspiral Gallery

Spiral Gallery

An infinite carousel of images staggered along a spiraling tube that scrolls indefinitely.

React Three Fiber
Drei
Motion
https://atelier-ui.com/spiral-gallery
Unlock Code

Unlock component

One license unlocks every pro feature for life, including the ones we haven't built yet.

Get pro access

Already have an account? Sign in


API

SpiralGallery

NameTypeDefaultDescription
itemsSpiralGalleryItem[]-The images to show, each one as { src, alt }.
radiusnumber4.5Radius of the tube the images travel around, in world units.
tileHeightnumber2.2Height of each image, in world units.
tileAspectnumber1.5Width-to-height ratio of each image. Images are cropped to fit.
countnumber20Number of images on screen at once. Items repeat if there are fewer.
verticalSpacingnumber0.55Vertical distance between one image and the next.
turnAnglenumber46Angle between one image and the next around the tube, in degrees.
tileRotationnumber1How much each image rotates on its own vertical axis as it orbits. 1 keeps images flat against the tube, 0 faces them all the same way.
cornerRadiusnumber0.05Corner rounding of each image, in world units.
curvenumber0.1How much each image bends inward across its width.
autoScrollnumber0.1Speed the carousel scrolls on its own, with no input.
easingnumber0.1How long the scroll takes to settle, in seconds. Higher is slower.
scrollSpreadnumber0.3Extra angle added between images while scrolling. 0 keeps the spacing fixed.
scrollGrowthnumber0.45How much the radius and vertical spacing grow while scrolling.
dispersionnumber1Amount of RGB color split applied to images while scrolling.
  • Install
  • Usage
  • API
  • SpiralGallery
Star on githubBuy me a coffeellms.txt