Crossfade Hero
Cycle through full-width hero photos and headlines. Visitors can choose a slide or pause playback.
- Dependencies
- gsap
- Size
- 299 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/crossfade-hero.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/crossfade-hero.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the crossfade-hero.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 | CrossfadeSlide[] | — | { name, image, imageAlt? } per slide. Defaults point to /media/fragrance-showcase/hero-*.webp; replace them with your own photographs. |
| eyebrow / eyebrowNote | string | "The House of ONYCX" / "Est. in silence" | Mono .64rem line at .28em; the note hides under 640px. |
| titleLine1 / titleLine2 | string | "Silence," / "bottled." | Two masked serif lines; the second is italic gold. |
| body | string | — | Supporting paragraph (14px, 16px from 640px, 1.9 leading). |
| primaryLabel / primaryHref / secondaryLabel / secondaryHref | string | — | Wine pill with a gold hairline and an outline pill, both with a white/10 sheen. Empty labels hide them. |
| editionLabel / editionText | string | "The first collection" / "Six scents. Infinite memories." | Top-right note from 1024px. Empty label hides it. |
| scrollLabel / scrollHref | string | "Scroll to discover" / "#manifesto" | Scroll cue with a 46px gold line (hidden under 640px). |
| autoplay / interval | boolean / number | true / 6500 | Advances only while on screen, the tab is visible and motion is allowed. |
| accent / wine / crimson | string | "#c8ae80" / "#5a0f14" / "#8b1e2d" | Gold accents, primary fill and its hover. |