Exhibition Showcase
Give each product its own image, headline, and lighting in a pinned showcase. Visitors can jump straight to a product.
- Dependencies
- gsap
- Size
- 391 lines
- Controls
- 7 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/exhibition-showcase.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/exhibition-showcase.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the exhibition-showcase.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 | ExhibitionItem[] | — | { name, word?, line, collection?, signature?, image, imageAlt?, href?, light? } per scene; light is the CSS background of the scene glow. |
| eyebrow / heading / headingAccent / intro | string | — | Section header copy. |
| ctaLabel / signatureLabel / controlsLabel | string | "Explore the piece" / "A visual signature" / "Scroll to explore" | Scene button, signature column and controls labels. |
| offset | number | 104 | Pin position below a fixed header (px); phones use offset − 16. The stage is 100svh − offset − 14px tall. |
| length | number | 0.8 | Viewport heights per scene on fine-pointer desktops (6 scenes = 4.8); other devices use 75%. |
| accent | string | "#ffc7c3" | Blush: active jump link, progress, scene button and focus ring. |