PRO

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.

Component
Install
npx shadcn@latest add https://ui.aryank.space/r/radial-name-wheel.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
names / imagesstring[]60 BLANK entriesOne label per ring position; the angle step is derived from the count.
radiusnumber1100Smaller values curve the type more visibly within the frame.
embeddedbooleantrueOwn the scroll container. Set false to drive it from the window scroll.
Customize
radiustext

Radius of the ring in px.

brandtext

Wordmark in the nav.

Dependencies
gsap