Editorial Hero
Pair a large headline with a framed photo, captions, and an inquiry link.
- Dependencies
- gsap
- Size
- 270 lines
- Controls
- 11 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/editorial-hero.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/editorial-hero.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the editorial-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 |
|---|---|---|---|
| eyebrow / note / sideNote | string | — | Top row, right note and the ✳ side note (newlines split lines). |
| line1 / line2 / accentWord | string | "A space to" / "Feel" / "at home." | Headline; line 2 is indented 18% (12% at ≤1100px, 0 at ≤600px) and ends in an upright serif at .86em. |
| image / imageAlt | string | "/media/interior-gallery/living.webp" | Framed photograph (loaded eagerly as the LCP image) and its description. |
| captionLeft / captionRight | string | — | Dark caption pills along the top of the frame; the right one hides at ≤600px. |
| cardLabel / cardTitle / cardHref | string | — | Frosted feature card with a 40px dark arrow disc that turns 5° on hover. |
| inquireLabel / inquireHref | string | — | Dark glass pill at the bottom right (hidden at ≤600px). |
| scrollLabel / footCenter / counter | string | — | Footer row with the 1×23px scroll line and the section counter. |
| paper / ink / muted / cross / accent | string | "#f4f6f6" / "#182831" / "#56646c" / "#354b60" / "#00638e" | Palette; accent is the focus ring. |
| entrance | boolean | true | Intro row, headline and side note fade up 22px (1.2s, stagger .1, delay .25, power3.out). |
| parallax | boolean | true | Image moves yPercent 0 → 9 from frame top at viewport top to frame bottom at viewport top (scrub 1.2). |