Seam Hero

Frame a hero photo with a curved edge around a round button, then introduce two featured projects below.

Dependencies: gsap
Size: 306 lines
Controls: 11 controls

example.tsx

1import { SeamHero } from "@/components/onycx/seam-hero";23export default function Example() {4  return (5    <SeamHero6      eyebrow={"Independent in spirit. Considered in every detail."}7      line1={"Considered spaces."}8      line2={"Extraordinary living."}9      summary={"Rooms with feeling. Materials with character. Interiors shaped around the life you want to live."}10      ctaLabel={"Explore our work"}11      paper={"#faf8f4"}12      espresso={"#4a342a"}13      khaki={"#d7c9b8"}14      cocoa={"#7d5a44"}15      reveal16      parallax17    />18  );19}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/seam-hero.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/seam-hero.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the seam-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
image / imageAlt	string	"/media/architectural-scenes/hero-sculptural.webp"	Wide photograph (eager, anchored to its bottom edge) and its description.
captionLeft / captionRight	string	—	White captions above the seam; the right one hides at ≤767px.
discoverHref / discoverLabel	string	—	Round ↗ button in the seam (64px at ≤767px) and its accessible name.
eyebrow / line1 / line2 / summary	string	—	Headline block; line 2 is set in cocoa.
ctaLabel / ctaHref	string	—	Espresso pill beside the summary; lifts 2px and turns cocoa on hover.
disciplines	string	"Residential, Commercial, Furniture & styling"	Comma-separated list with em-dash markers.
studies	SeamHeroStudy[]	—	{ eyebrow, title, image, imageAlt?, href } study cards, two columns at every width.
paper / ink / muted / espresso / khaki / cocoa	string	"#faf8f4" / "#28221e" / "#6e6158" / "#4a342a" / "#d7c9b8" / "#7d5a44"	Linen palette; paper fills the page, the seam and the round button.
reveal	boolean	true	Photo opens from inset(0 0 8% 0 round 32px) over 1.05s power3.out; the headline rises 24px over .85s.
parallax	boolean	true	Study photos drift yPercent −2.5 → 2.5 at scale 1.06 (scrub .8).