Scroll Caliper

Component 17

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Caliper to your project and fits it to your theme.

Code

How Scroll Caliper is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}