Carousel Disc Scroll
A hundred and fifty thumbnails arranged around a single disc tilted fifty five degrees away from you and turned a full revolution as you scroll. Every tile is rotated about a transform origin four hundred pixels below itself, so one CSS property places it on the circle without any trigonometry: the ring is the origin offset, not computed coordinates. Pointer position tilts the whole disc a couple of degrees on both axes, and hovering a tile lifts it ten pixels out of the plane and pushes its image into the fixed preview frame at the centre. GSAP ScrollTrigger with a scrub of two.
npx shadcn@latest add https://ui.aryank.space/r/carousel-disc-scroll.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 / itemCount | string[] / number | 15 BLANK images / 150 | Images are cycled to fill itemCount tiles, so the two are independent. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
itemCounttextTiles placed around the disc.
navLefttextTop left label.
gsap