Leading Unfold

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<LeadingUnfold />

Installation

npx shadcn@latest add https://webberui.com/r/leading-unfold.json

Usage

import { LeadingUnfold } from "@/components/ui/leading-unfold";

<LeadingUnfold className="text-lg font-medium">
  The paragraph starts compressed into a blot of ink and gradually unfolds into a readable passage as you scroll.
</LeadingUnfold>

The component creates a useScroll from its own position within the scroll container, and as its top edge enters the configured trigger range, line-height and letter-spacing interpolate from the compressed state to the expanded state. If the text lives inside a nested overflow scroll container, pass that container's ref to container:

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[300px] overflow-y-auto">
  <LeadingUnfold container={scrollerRef}>{longText}</LeadingUnfold>
</div>

Controlled mode

Pass in an external progress (a 0 → 1 MotionValue) to drive the unfolding yourself — for example bound to a page-level useScroll or any other animation source:

const { scrollYProgress } = useScroll();

<LeadingUnfold progress={scrollYProgress}>{longText}</LeadingUnfold>

Props

How it works

• Both ends of the trigger range are anchored to the block's top edge (start), so the bottom edge growing downward never doubles back and interferes with its own progress calculation, keeping the unfolding smooth and one-way.
• Animating line-height triggers reflow every frame — this is exactly where the "layout height grows and pushes the following sections down" effect comes from; use it on only a few narrative blocks per view.
• Font size, weight, and colour are all controlled by className; the component itself only handles the interpolation of leading, tracking, and blur.

Accessibility

• The text is a real DOM node and the compressed state is purely visual styling, so a screen reader always reads the complete, correct paragraph.
• When the user has "reduce motion" enabled at the system level, the final readable paragraph is rendered statically in its expanded state and no scroll animation is mounted at all.