--- /** * StickyScrollReveal — a two-column scroll narrative. The left column * stacks section titles/descriptions inside the component's own scroll * frame; the right column holds a sticky card whose background gradient * and content swap to match the section closest to the reading line. A * custom element listens to the container's own `scroll` event (not the * page) and picks the active section by comparing scroll progress against * evenly spaced breakpoints — the same approach as the original, minus the * animation library. */ export interface StickyScrollItem { /** Section heading shown in the left column. */ title: string; /** Section body text shown under the heading. */ description: string; } interface Props { /** * Section titles and descriptions, top to bottom. The sticky card * content for item `i` goes in the `content-i` named slot. */ items: StickyScrollItem[]; /** Additional classes for the root element. */ class?: string; /** Additional classes for the sticky card. */ contentClass?: string; } const { items, class: className, contentClass } = Astro.props; ---

{ items.map((item, index) => (

{item.title}

{item.description}

)) }

{ items.map((_, index) => (

)) }

Installation

Install dependencies

Add these files

Configuration

Use it