Radial Name Wheel
Sixty labels laid around a circle eleven hundred pixels across, most of it off-frame, so you only ever see the arc that passes through the viewport. Scroll rotates the whole ring by a ten-thousandth of a pixel per unit, which is why a very long page turns it slowly and evenly, and every label is re-placed with cos and sin plus a rotation matching its own angle so the type stays tangent to the circle. Hovering a label pushes an image into a frame that trails the cursor, clip-wiped up from the bottom; leaving wipes it away from the top, and older images in the stack clear on a delay so a fast sweep leaves a brief trail rather than snapping.
npx shadcn@latest add https://ui.aryank.space/r/radial-name-wheel.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 |
|---|---|---|---|
| names / images | string[] | 60 BLANK entries | One label per ring position; the angle step is derived from the count. |
| radius | number | 1100 | Smaller values curve the type more visibly within the frame. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
radiustextRadius of the ring in px.
brandtextWordmark in the nav.
gsap