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. A subtle vertical marker indicates a performance milestone (e.g. LCP), while time-axis ticks anchor the timeline.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus any bar to compare timing; click or tap to pin start, duration, end and step details.
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