shadcn.io is not affiliated with official shadcn/ui
CTA with Orbit Ring Avatars Block for Svelte
A split call to action on drafting lines: an invite for a private community beside a framed ring of member avatars that turns slowly while the section is hovered or holds focus.
Installation
Overview
A split closing section for Svelte with Ark UI, showing a community as a constellation. The block sits on the page's spine: two side rails at the page column and one top rule with a + mark on each crossing, so it joins the blocks above and below it. On the start side sit a headline that names the product and the member count, one sentence, a Shine Button ("Request an invite") and an outline link; a hairline divider separates them from the end side, where a frame with + marks on its corners holds eight member avatars on a ring around a medallion. At rest it is still; while the pointer is over the section, or focus is inside it, the ring turns slowly and each avatar turns back so its initials stay upright. On phones the copy comes first and the ring follows under a rule, so the button is on the first screen. The motion is plain CSS, it never starts by itself, and it is removed for visitors who ask for reduced motion. Made for community, user-group and invite-only program pages that want a "we are many" picture without photos.
FAQ
How do I add or remove avatars on the ring?
Add or remove entries in MEMBERS. Each avatar's place comes from placeAt, which sets an --angle CSS variable of 360 divided by the number of members times its index, so any count from five to twelve stays evenly spaced with no coordinates to recompute. Keep the avatars small enough that neighbors don't touch at 320px; eight at 40px is comfortable.
When does the ring move, and what about reduced motion?
Only while the section is hovered or something in it has focus: the animation is always set but paused, and group-hover and group-focus-within start it, so it is something a visitor does, never something that runs at them. It pauses where it stops when the pointer leaves. With reduced motion turned on, there is no animation at all and the ring stays as drawn. Nothing carries information, so nothing is lost.
Is this orbit ring CTA accessible for screen readers?
Yes. The whole frame, the ring, the avatars and the medallion are decorative and aria-hidden, and the headline already says "Join 12,000+ people shaping Plinth in the open", with the count in bdi to keep it in order in right-to-left languages. The section's one heading is an h2, the two actions are links named by their text, and keyboard focus shows a ring on each.
The buttons render their a through asChild, so the button's styles land on the link.
How does the layout adapt to small screens?
Below lg the two sides stack: the copy first, then the framed ring under a hairline rule that carries + marks at the rails. The frame is as wide as the column up to 18rem (20rem from sm), and everything on the ring is placed by percentage and by angle, so it keeps its proportions from 320px to desktop. The headline and the two buttons wrap.
How does the block work with the page's theme?
Every colour is a token: hairlines are border, the avatars are muted discs and the medallion is bg-foreground with text-background, so it is light on a light theme and dark on a dark one. The Shine Button is the one place the theme's primary colour appears.