effects

Process Story

The scroll-driven studio process section — numbered phases that pin, advance, and hand off to the next as you scroll through them.

pins and advances on scroll

scrollnarrativesections

Install with the shadcn CLI

npx shadcn@latest add https://onthic.com/r/process-story

Also needs these files

@/components/ui/interactive-hover-buttonsrc/components/ui/interactive-hover-button.tsx
@/lib/click-ticksrc/lib/click-tick.ts
@/lib/motionsrc/lib/motion.ts

Included automatically by the CLI command and the prompt.

Usage

import ProcessStory from "@/components/ui/process-story";

<ProcessStory />