proNew136 lines · framer-motion

Latency Chart

Before, optimized, after — no fabricated figures. A full-width feature section with an animated SVG bar chart comparing relative stages (Before / Optimized / After) and a dashed trend line drawn over them, with no axis numbers and no invented figures.

Use it for: An AI or infra product page that wants to show a performance win visually without publishing a specific benchmark number.
Themes: Light + dark
License: Commercial use

Live

Response time

Faster with every pass, not just the last one

Relative change across tuning stages. No fabricated figures, just before and after.

Before → After, trending down

tsx

"use client";

import * as React from "react";
import { motion, useInView, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width feature section with an animated bar chart comparing relative stages
 * ("Before" / "Optimized" / "After") with a trend line drawn over them. No axis
 * numbers, no invented figures — only relative height and a declining line.
 */

export interface LatencyStage {
  label: string;
  /** Relative bar height, 0–1. Purely relative, never shown as a number. */

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each stage renders as a bar whose height animates in from the baseline once scrolled into view, staggered left to right.
→An optional dashed trend line draws itself across the bar tops using pathLength after the bars start animating, visually reinforcing the downward trend.
→Gridlines are plain, unlabeled horizontal guides — there is no numeric axis anywhere in the chart.
→stages accepts any list of { label, relative } so the same chart works for latency, cost, error-rate or any other declining metric framed in relative terms.
→speed scales bar and line animation duration; prefers-reduced-motion renders the finished chart with no animation.

Accessibility

✓The chart has `role="img"` with an `aria-label` describing the trend in words, so the takeaway doesn't depend on reading the chart visually.
✓Stage labels are real SVG text, not images, so they stay selectable and legible at any zoom.
✓Honours prefers-reduced-motion.