Waterfall chart
Performance Waterfall Chart
A Gantt-style network timeline that reveals each resource step as a bar growing from its start offset.
Bars animate through per-step clip-paths so the reveal tracks the true start time. The slowest step pulses with a glow ring, a vertical marker indicates a performance milestone (e.g. LCP) and a time axis with ticks anchors the timeline.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus any bar to dim the rest and reveal a tooltip with start offset, duration and step name.
Usage
import { PerformanceWaterfallChart } from "@/registry/new-york-v4/ui/performance-waterfall-chart"
<PerformanceWaterfallChart data={steps} markerLabel="LCP" markerAt={256} />Page Load Waterfall
Network resource timing breakdown for dashboard.example.com