Inline Image Statement

Place rounded photos between phrases in a headline and bring the text into contrast as you scroll.

Dependencies: gsap
Size: 223 lines
Controls: 10 controls

example.tsx

1import { InlineImageStatement } from "@/components/onycx/inline-image-statement";23export default function Example() {4  return (5    <InlineImageStatement6      text={"We shape spaces that |look beautiful, {0} feel natural, |and help people {1} imagine a life within them."}7      eyebrow={"A LITTLE ABOUT THE STUDIO"}8      caption={"Our studio brings a thoughtful eye and a personal approach to every property, from the first walkthrough to the final cushion."}9      background={"#fbf7f4"}10      color={"#252527"}11      accent={"#854f6c"}12      dim={0.22}13      start={80}14      end={48}15      scrub={0.5}16    />17  );18}

Installation

CLI · shadcn registry

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

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/inline-image-statement.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the inline-image-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
text	string	—	Statement; \| separates highlight phrases and {n} inserts image n. Spaces are kept as written.
images	InlineImage[]	—	{ src, alt? } referenced by token index; pills are decorative.
eyebrow	string	"A LITTLE ABOUT THE STUDIO"	Label beside the star. Empty hides it.
caption / linkLabel / href	string	—	Caption row: a muted paragraph and an underlined arrow link.
background / color / muted / accent	string	"#fbf7f4" / "#252527" / "#685d54" / "#854f6c"	Milk paper, ink, mocha caption and mauve star.
dim	number	0.22	Opacity of unread phrases and pills.
start / end / scrub	number	80 / 48 / 0.5	ScrollTrigger bounds (viewport %) and smoothing.

Behaviour notes

The h2 carries the plain sentence in aria-label; the phrases and image pills inside are aria-hidden.
Breakpoints follow the source: 1fr / 3.5fr under 1100px, one column with the star inline under 960px, phone type and pills under 700px; above 1800px sizes grow with the viewport.
Everything renders at full opacity without JavaScript and under reduced motion.
Default images point to /media/residential-gallery/... from the source project; replace them with your own.

Pattern origin

The home-staging studio intro: 1fr / 3fr grid with a 28px mauve star and a 9px label, clamp(32px, 3.8vw, 56px)/1.17 at −0.045em (clamp(29px, 6.9vw, 43px)/1.23 under 700px), 105 × 43px pills (70 × 29px on phones) with a 50px radius at vertical-align −4px, and phrases scrubbed from opacity .22 to 1 (stagger .15, top 80% → bottom 48%, scrub .5).

#text#statement#images#scroll#gsap#editorial