Ring Carousel

Browse portraits and headlines around a rotating dashed ring in a pinned scroll section.

Dependencies: gsap
Size: 337 lines
Controls: 6 controls

example.tsx

1import { RingCarousel } from "@/components/onycx/ring-carousel";23export default function Example() {4  return (5    <RingCarousel6      title={"Aesthetic Curation"}7      cardLabel={"Core Identity"}8      cardText={"Redefining visual storytelling through haute couture and cinematic presence."}9      stepDistance={1000}10      scrub={1}11      accent={"#ff0000"}12    />13  );14}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/ring-carousel.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/ring-carousel.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the ring-carousel.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
slides	RingSlide[]	—	{ word, image, imageAlt? } per slide; the ring turns 360 / slides.length per slide.
callouts	RingCallout[]	—	{ label, top, left?, right?, align? } boxes placed inside the ring box (lg+ only); they rotate with the ring like the original.
title	string	"Aesthetic Curation"	Thin, 0.15em-tracked title with its glowing accent bar; centred on phones, top-right from 768px.
cardLabel / cardText	string	—	Static blurred info card shown below 1024px.
stepDistance	number	1000	Pinned scroll per slide (px); total pin is n × stepDistance.
scrub	number	1	Seconds of smoothing.
accent	string	"#ff0000"	Ring, ticks, glow, callouts and title bar.

Behaviour notes

The original section uses stock portraits rather than local files, so the defaults are three verified Unsplash images; replace them with your own transparent or dark-background portraits.
Pins whenever the viewport is at least 560px tall and motion is allowed (phones included, as in the original); short viewports and reduced motion get a click-through stage with 44px previous / next buttons and a polite live caption.
Backdrop words are 12vw / 15vw / 18vw black uppercase at 5% opacity; the section clips them, so long words never cause horizontal scroll.
From 1800px the small labels, title, figure and card grow with the viewport using the original's wide-screen step.

Pattern origin

The model portfolio's 'Aesthetic Curation' section: a 1.5px dashed ring at 40% accent (85vw → 70 → 65 → 55vw) with 80px inner and outer glow, four tick markers and five callouts that turn with it, rotating 360 / n per 1.5s segment with power2.inOut over a 3000px pin at scrub 1; portraits fade out to scale .9 and in from 1.1, backdrop words swap at y ∓100 to opacity .05, each incoming slide 0.2s behind.

#pin#scroll#carousel#portfolio#fashion#gsap