Scroll inside the preview ↓

Normal scrolling resumes here.

Controls

side

smallWidth%

largeWidth%

aspectRatio

gappx

scrollPerItem

scrubs

showIndex

Scroll Focus

A column of images where the one in the center grows, with a title list that stays in sync.

$ pnpm dlx shadcn@latest add @tweenly/scroll-focus

import { ScrollFocus } from "@/components/scroll-focus"

export function Demo() {
  return (
    <ScrollFocus items={items} />
  )
}

Updates live as you change the controls. Only non-default props are included.