Arc Selector

Arrange products in a semicircle. Hover a thumbnail or select it with the keyboard to bring that product into the center.

Dependencies: gsap
Size: 372 lines
Controls: 7 controls

example.tsx

1import { ArcSelector } from "@/components/onycx/arc-selector";23export default function Example() {4  return (5    <ArcSelector6      eyebrow={"Real ingredients. Remarkable little moments."}7      heading={"Find your *favourite.*"}8      intro={"Nine ways to make a small moment taste a little better.\nChoose a flavour. We'll take you to the good part."}9      orbitEyebrow={"Small batches. Real ingredients."}10      captionEyebrow={"A closer look"}11      defaultIndex={0}12      accent={"#b5939c"}13    />14  );15}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/arc-selector.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/arc-selector.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the arc-selector.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
items	ArcItem[]	—	{ label?, kind, name, note?, price?, image, thumb?, imageAlt?, href? }; chips are links when href is set, otherwise aria-pressed buttons. Nine items fill the ring layout exactly; more wrap its positions.
eyebrow / heading / intro	string	—	Header copy; asterisks set the italic serif, a newline in intro breaks the line from 768px.
orbitEyebrow / captionEyebrow	string	—	Pill above the narrow-layout caption, and the eyebrow under the desktop dish.
links	{ label, href }[]	two category links	Row under the stage separated by ✳; pass [] to hide it.
defaultIndex	number	0	Product shown first.
accent	string	"#b5939c"	Section eyebrow colour.

Behaviour notes

Default images point to /media/snack-selector/ (the original round dish cut-outs and 48px chip thumbnails); replace them with your own square cut-outs on a dark field.
Desktop: stage calc(100% − 60px) up to 1240px, height clamp(490px,50vw,640px); chips clamp(98px,12vw,152px) wide, 15px radius, rgba(226,221,227,.055) at rest and rgba(131,74,91,.25) with a rgba(203,157,171,.4) border when active.
Below 1024px, or on touch screens up to 1366px, the heading is visually hidden and the live caption, a 52px grid texture, a ring and 44px previous / next buttons take over; chips move to fixed ring positions around a 90%-wide dish.
Focus and pointerenter both select; ArrowLeft / ArrowRight (Up / Down, Home, End) walk the chips. The name, note and price are announced in a polite live region; only the selected dish image has alt text.
Heading and stage rise 32px over .9s power3.out when they reach 94% of the viewport; reduced motion skips the rise and the crossfade.

Pattern origin

The confectioner's flavour collection: a 40px-radius section on radial-gradient(ellipse at 50% 68%, #2b1520, #0f0406 65%), chips at angle π − i/(n−1)·π placed at x = 50 + 42cos, y = 68 − 55sin with 0.075-unit SVG connectors to (50 + 23cos, 70 − 25sin), a min(35vw,430px) dish at top 32% whose cut-outs crossfade over .5s while settling from rotate(−6deg) scale(.98) over .8s cubic-bezier(.22,1,.36,1), and a ring layout with fixed chip positions below 1024px.

#selector#orbit#arc#product#commerce#keyboard