Ghost Word Hero

Place a cutout image in front of an oversized word, with a separate headline and call to action.

Dependencies: gsap
Size: 252 lines
Controls: 9 controls

example.tsx

1import { GhostWordHero } from "@/components/onycx/ghost-word-hero";23export default function Example() {4  return (5    <GhostWordHero6      word={"UNORDINARY"}7      line1={"Beyond the"}8      line2={"ordinary."}9      kicker={"Strategy. Design. Digital experiences."}10      body={"We turn bold ideas into brands and digital experiences you don’t just see."}11      ctaLabel={"Start a project"}12      accent={"#e85002"}13      scrollMotion14      parallax={0.12}15    />16  );17}

Installation

CLI · shadcn registry

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

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/ghost-word-hero.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the ghost-word-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
word	string	"UNORDINARY"	Decorative backdrop word (aria-hidden), centred and never wrapped.
metaLeft / metaRight	string	—	Mono top row; the right side hides at 900px and below.
kicker / line1 / line2	string	—	Headline; line 2 takes the accent and a ✳ superscript.
body / bodyTail	string	—	Aside paragraph (max 280px); bodyTail follows a line break that collapses on phones.
ctaLabel / ctaHref / exploreLabel / exploreHref	string	—	210px accent pill and the secondary down-arrow link. Empty labels hide them.
artCaption / bottomLeft / bottomRight	string	—	Mono captions in the scene and the bottom bar.
image / imageAlt	string	"/media/chrome-hero/liquid-chrome.webp"	Cut-out object drawn with object-fit: contain over the word. Empty alt marks it decorative.
accent	string	"#e85002"	Accent line, status dot and CTA fill (hover mixes 14% white).
scrollMotion / parallax	boolean / number	true / 0.12	Scrubbed art-layer parallax from 900 × 700 viewports; travel is ±(height × parallax × .35).

Behaviour notes

The default image points to /media/chrome-hero/liquid-chrome.webp in this site; replace it with your own cut-out object.
No entrance animation: the copy is in its final position in markup, matching the original (which revealed it from behind a preloader).
Reduced motion, small or short viewports keep the art layer static.
Below 1199 / 900 / 700px the headline steps to 100 / 85 / clamp(52px, 16vw, 92px); at 700px the grid stacks and the art becomes a 260px band. Above 1800px every size grows with the viewport.

Pattern origin

The independent design studio template's opening scene: a min(100svh, 1100px) frame, a clamp(70px, 14vw, 220px) #171717 backdrop word at top 32%, a contained 1200px art layer at top 17% / 48% height that parallaxes ±(height × .12 × .35) at scrub .8 from 900 × 700, and a 1.6fr / 1fr headline grid in clamp(88px, 9.3vw, 142px) at .88 line-height.

#hero#dark#product#parallax#gsap#typography