A pinned two-column reveal where scrolling the text steps a synced visual panel through each item.

Text scrolls in the left column while a pinned panel on the right swaps to match the item in view — the premium way to walk through features one beat at a time. Scroll the preview.

Playground

Collaborate in real time

Cursors, comments, and presence keep the whole team on the same page.

Collaborate

Ship with confidence

Preview every change and roll out when it feels right.

Ship

Scale calmly

Infrastructure that grows with you, never against you.

Scale

Collaborate

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/sticky-scroll.json"

StickyScroll tracks the section's scroll progress and derives the active index from it, dimming the inactive titles and cross-fading the pinned panel to the active item's content. Under reduced motion the swaps are instant, opacity only.

Usage

tsx

import { StickyScroll } from "@/components/godui/sticky-scroll";

tsx

<StickyScroll
  items={[
    { title: "Collaborate", description: "Real-time cursors.", content: <Preview /> },
    { title: "Ship", description: "Deploy on click.", content: <Preview /> },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`StickyScrollItem[]`	—	The steps, in scroll order.

Each item is { title: string; description: React.ReactNode; content: React.ReactNode }. StickyScroll also forwards every standard <div> attribute to the root.

Sticky Scroll