Sticky Scrollytelling

Keep a photo in view while alternating text cards tell the story alongside it.

Dependencies: No extra packages
Size: 132 lines
Controls: 5 controls

example.tsx

1import { StickyScrollytelling } from "@/components/onycx/sticky-scrollytelling";23export default function Example() {4  return (5    <StickyScrollytelling6      imageOpacity={0.3}7      blockHeight={120}8      background={"#0c0a09"}9      ink={"#f7f3ed"}10      muted={"#d9ccb5"}11    />12  );13}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/sticky-scrollytelling.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/sticky-scrollytelling.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the sticky-scrollytelling.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
blocks	StoryBlock[]	—	{ title, body, image? } per block; an image swaps the background while that block is mid-screen.
image	string	"/media/ceramics-scenes/kiln-firing.webp"	Sticky background photograph (decorative). Replace with your own.
imageOpacity	number	0.3	Opacity of the background photograph.
blockHeight	number	120	Height of each story block in vh.
background / ink / muted	string	"#0c0a09" / "#f7f3ed" / "#d9ccb5"	Section colour (also the top and bottom fades), title and body colours.

Behaviour notes

The default image points to /media/ceramics-scenes/kiln-firing.webp from the original template; replace it with your own.
Pure CSS sticky: without JavaScript every card is readable over the first image. No ancestor overflow is set, so the sticky layer works inside any page.
Per-block images crossfade over 1s via an IntersectionObserver on the middle 10% of the viewport; reduced motion swaps instantly and drops the card hover scale.

Pattern origin

The pottery template's scrollytelling band: a sticky h-screen image at opacity .3 under a stone-950 → transparent → stone-950 fade, content pulled up by −100vh, 120vh blocks (first centred, second justify-end md:px-24 pb-32) with max-w-3xl glass cards (p-12 md:p-20, rounded 3rem, backdrop-blur-2xl, stone-900/40, stone-500/30 border, shadow-2xl, hover:scale-[1.02] over 700ms), serif text-5xl → md:text-8xl tracking-tight titles and light text-2xl → md:text-4xl sand-200 copy.

#sticky#scroll#storytelling#glass#editorial