Sticky Scroll Reveal
Content that sticks in place while scrolling text panels cycle through alongside it.
Preview
Sticky Scroll Reveal
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature explanations and step-by-step guides.
Why this component matters
Keeps visual context stable while text changes, reducing cognitive load for multi-step explanations.
Usage guidance
Use for 3-5 step processes or feature explanations. The sticky side should show a visual (image, code, or demo) that updates with each text panel.
Installation
bash
npx shadcn@latest add @aceternity/sticky-scroll-revealUsage
example.tsxtsx
import { StickyScrollReveal } from "@/components/ui/sticky-scroll-reveal";
export default function Example() {
return (
<StickyScrollReveal>
{/* Your content here */}
</StickyScrollReveal>
);
}Source
sticky-scroll-reveal.tsx
components/ui/sticky-scroll-reveal.tsx