Threshold Band Chart

A horizontal quality-band ruler that translates a raw metric into a Good / Needs improvement / Poor verdict at a glance.

Bands reveal with staggered clip-path animation, a diamond marker slides to the current value with a spring ease and the active band lifts its opacity to draw the eye. Hover any band to see its full range.

Dependencies

framer-motiontailwind-mergetailwind-variants

Interaction type

Hover a band to reveal its range and compare against the current value in the tooltip.

Usage

import { ThresholdBandChart } from "@/registry/new-york-v4/ui/threshold-band-chart"

<ThresholdBandChart bands={bands} value={2800} unit="ms" />

LCP Score

Largest Contentful Paint — measures perceived load speed