Sticky Scroll

Copy scrolls past a pinned panel that swaps per section.

1.3 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

Open in v0

Install

Add a component with one CLI command. The source lands in your repo.

Customize

Every class is yours to edit. Tokens come from your theme.

Ship

No runtime to configure. It is just a React component.

npx shadcn add …

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/sticky-scroll.json

Adds components/velora/sticky-scroll.tsx, installs motion and merges the keyframes and tokens into your CSS.

Props

Prop	Type	Default
`items*`	`StickyScrollItem[]`	`—`
`container` Scrollable element to track instead of the window	`React.RefObject<HTMLElement \| null>`	`—`
`className`	`string`	`—`

StickyScrollItem

interface StickyScrollItem {
  title: string;
  description: string;
  /** Rendered in the pinned panel while this item is active */
  content?: React.ReactNode;
}

Accessibility

Reduced motion: The pinned panel swaps instantly with no crossfade or scale, and titles switch between full and 60% opacity without fading.
Keyboard: Nothing is interactive by default. Interactive `content` in inactive panels is inert, so only the visible panel's controls take focus.
Screen readers: Titles are h3 headings with a paragraph each; inactive panels are aria-hidden and inert, and the panel column is hidden below the lg breakpoint.