Text Circle Scroll
Arrange any items around a circle and rotate the ring based on scroll progress (with spring), auto-spin, or a combination of both.
Examples
Scroll-driven
Bungalow
Aurora
Lullaby
Labyrinth
Idyllic
Felicity
Demure
Chatoyant
TheseDays
Demure
Aurora
Bungalow
Auto-spin (no scroll)
Aurora
Lullaby
Labyrinth
Idyllic
Felicity
Aurora
Lullaby
Labyrinth
Idyllic
Felicity
Aurora
Lullaby
Labyrinth
Idyllic
Felicity
Aurora
Using custom nodes
Design
Motion
UI
DX
A11y
Next.js
Tailwind
Framer
Installation
npx shadcn-extras@latest add text-circle-scroll
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | (string | ReactNode)[] | — | Items around the ring in order. |
radius | number | 110 | Radius in px (center → baseline). |
innerGap | number | 90 | Visual hole size (px). |
startAngle | number | -90 | First item angle in degrees. |
clockwise | boolean | true | Direction of item order. |
rotateOnScroll | boolean | true | Attach rotation to scroll. |
scrollDegrees | number | 360 | Total degrees across viewport scrolling. |
autoSpinDegPerSec | number | 0 | Constant rotation (deg/s). |
springStiffness | number | 120 | Spring stiffness for scroll rotation. |
height | number | string | 320 | Outer container height. |
className / ringClassName / itemClassName / textClassName | string | — | Slot overrides. |