A ring of product cards seen from above tilts up to eye level and turns as you scroll. The piece facing you is named in the footer with its number and price.
Wheel-thrown stoneware from our studio in Porto. When a glaze sells out, it is gone until next year.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-ring.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-ring.tsx.
import { HeroScrollRing } from "@/components/hyperblur/hero-scroll-ring"
<HeroScrollRing title="The autumn edit" turns={1.5} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Atelier Noon · Spring 2027" | Mono label above the headline. |
| title | string | "Ten pieces, fired once a season" | Headline in the top left. |
| subtitle | string | "Wheel-thrown stoneware from our studio..." | Paragraph in the top right. Hidden when empty. |
| pieces | { name: string; price: string; glaze: string; backdrop: string }[] | 10 pieces | Cards on the ring. Glaze colors the vessel, backdrop the card. Eight to twelve read best. |
| cta | { label: string; href: string } | null | { label: "Shop the collection", href: "#" } | Outlined pill in the footer. null hides it. |
| turns | number | 1 | Full turns of the ring over the whole scroll. |
| accent | string | "#f2a5c0" | Accent color used for highlights, buttons and progress details. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 7 | Seconds for one forward pass of the autoplay loop. |
| length | number | 4 | Scroll distance in stage heights while the hero is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the hero lives inside a scrolling container. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |