A vernier-caliper style measurement widget pinned to the edge of a scrollable container that visually measures the active section's pixel height and scroll percentage as you scroll.
import { ScrollCaliper } from "@/components/ui/scroll-caliper";
export default function ScrollCaliperDemo() {
return (
<div className="w-full h-screen flex items-center justify-center bg-background p-8">
<ScrollCaliper className="h-[480px] w-full max-w-md border border-border rounded-md">
<div className="space-y-12 p-8">
<section data-section className="space-y-3">
<h3 className="text-sm font-semibold text-foreground">Datum</h3>
<p className="text-sm leading-relaxed text-ns-muted">
Every measurement starts from a reference surface. The caliper
treats the top of each section as its datum and closes the
opposing jaw on the far edge.
</p>
<p className="text-sm leading-relaxed text-ns-muted">
Every measurement starts from a reference surface. The caliper
treats the top of each section as its datum and closes the
opposing jaw on the far edge.
</p>
</section>
<section data-section className="space-y-3">
<h3 className="text-sm font-semibold text-foreground">Extent</h3>
<p className="text-sm leading-relaxed text-ns-muted">
The jaw opening reads the section's visible span in pixels. Scroll
and the blades chase the new edges with near-critical spring
damping, a hair of lag by design.
</p>
<p className="text-sm leading-relaxed text-ns-muted">
The jaw opening reads the section's visible span in pixels. Scroll
and the blades chase the new edges with near-critical spring
damping, a hair of lag by design.
</p>
</section>
<section data-section className="space-y-3">
<h3 className="text-sm font-semibold text-foreground">Runout</h3>
<p className="text-sm leading-relaxed text-ns-muted">
Stop scrolling and the needle over-settles with a visible wobble
before locking, the way a real dial indicator bleeds off its last
few microns of momentum.
</p>
<p className="text-sm leading-relaxed text-ns-muted">
Stop scrolling and the needle over-settles with a visible wobble
before locking, the way a real dial indicator bleeds off its last
few microns of momentum.
</p>
</section>
</div>
</ScrollCaliper>
</div>
);
}