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 @compronents/radial-name-wheel

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
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