Outline Depth Statement

Layer solid and outlined words that move at different speeds as you scroll.

Dependencies: No extra packages
Size: 180 lines
Controls: 9 controls

example.tsx

1import { OutlineDepthStatement } from "@/components/onycx/outline-depth-statement";23export default function Example() {4  return (5    <OutlineDepthStatement6      eyebrow={"The Philosophy"}7      top={"Quiet"}8      bottom={"Luxury"}9      body={"No logos shouting. No trends chasing. Only considered design, honest materials, and garments made to be lived in — season after season."}10      color={"#EEE4D6"}11      accent={"#AD7D56"}12      background={"#000000"}13      topSpeed={0.18}14      bottomSpeed={0.42}15    />16  );17}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/outline-depth-statement.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/outline-depth-statement.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the outline-depth-statement.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	string	"The Philosophy"	12px uppercase label, 0.3em tracking, in the accent colour.
top / bottom	string	"Quiet" / "Luxury"	Solid word and outlined word; read as one heading.
body	string	—	Centred paragraph (max 42rem) under the words; empty hides it.
color / accent / muted / background	string	"#EEE4D6" / "#AD7D56" / "#998A79" / "#000000"	Solid fill, outline stroke and eyebrow, paragraph, section background.
topSpeed / bottomSpeed	number	0.18 / 0.42	Drift of each word: translateY = −progress × speed × 100px, progress −1 → 1 across the viewport.

Behaviour notes

One passive scroll listener per word schedules at most one frame; work pauses while the word is off-screen (IntersectionObserver, 100px margin). Works with Lenis, which emits native scroll events.
The eyebrow fades and the paragraph fades up 2rem over 900ms cubic-bezier(0.16,1,0.3,1) the first time they enter view; content already on screen, and reduced motion, stay static and visible.
The section clips overflow, so very long words never cause horizontal scroll at 360px.

Pattern origin

The Luxe home page's 'Philosophy' statement: weight-900 uppercase words at clamp(3.25rem, 15vw, 15rem)/0.9 with −0.03em tracking, the second outlined with a 1.5px (2.5px from 768px) #AD7D56 stroke and pulled up 0.12em, each in the template's dependency-free Parallax (translate = −progress × speed × 100px) at 0.18 and 0.42, between a 0.3em-tracked eyebrow and a 1.05rem/1.9 paragraph on black, py-28 / md:py-44.

#text#display#parallax#outline#scroll