Components / Animations / Scroll Expand

Scroll Expand

A framed panel that opens to full bleed as you scroll past it. JS writes two custom properties and CSS does the rest, so children can join the animation without any wiring.

Usage

import ScrollExpand from '@/components/scroll-expand'

<ScrollExpand
  width={62}
  height={48}
  smoothing={0.12}
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/scroll-expand.json

Model

p = clamp((scroll − start) / (travel·vh), 0, 1)

p is written to two CSS variables anything inside can read

Props

Property	Type	Default	Description
`media`	`ReactNode`	—	Whatever sits inside the frame — an image, a video, a canvas.
`width`	`number`	`42`	Starting frame width, as a percentage of the viewport.
`height`	`number`	`58`	Starting frame height, as a percentage of the viewport.
`radius`	`number`	`24`	Corner radius at rest, in px.
`endRadius`	`number`	`0`	Corner radius once fully open, in px.
`zoom`	`number`	`1.35`	Scale the media starts pushed in at.
`scrim`	`number`	`0.45`	Peak darkening over the media, 0..1.
`travel`	`number`	`1.2`	Scroll budget, as a multiple of the pinned panel's height.
`hold`	`number`	`0.35`	Fraction of that budget spent held fully open.
`smoothing`	`number`	`0.09`	Per-frame approach rate for the eased value.
`ease`	`ScrollEase`	`'inOut'`	—
`onProgress`	`(progress: number) => void`	—	Called with raw progress, 0..1, on every frame it changes.
`children`	`ReactNode`	—	—