Horizontal Scrub
Pinned horizontal track scrubbed to scroll.
Scroll — track scrubs horizontally while pinned
1
2
3
4
5
Installation
Requires MotionProvider and gsap. Add the horizontal scrub component with the shadcn CLI.
npx shadcn@latest add https://yami.ui.unsanity.ai/r/horizontal-scrub.jsonUsage
import { HorizontalScrub } from "@/void/scroll/horizontal-scrub"
// Set --void-pin-top in globals.css to clear fixed nav (Yami docs: 5rem / 5.5rem)
<HorizontalScrub laneHeightVh={100}>
{slides.map((s) => <Slide key={s.id} />)}
</HorizontalScrub>Examples
Default
Scroll — track scrubs horizontally while pinned
1
2
3
4
5
Code
import { HorizontalScrub } from "@/void/scroll/horizontal-scrub"
// Set --void-pin-top in globals.css to clear fixed nav (Yami docs: 5rem / 5.5rem)
<HorizontalScrub laneHeightVh={100}>
{slides.map((s) => <Slide key={s.id} />)}
</HorizontalScrub>