ThirdBentoAnimation

Usage#

Use it for the "Instant insight reporting" tile of BentoSection, or any tile that needs a lightweight "metrics going up" motion. It is not a data chart: use ChartContainer for real numbers.

What you provide: data (the y values, required; BentoSection passes [20, 30, 25, 45, 40, 55, 75]), toolTipValues (numbers the pill cycles through, required), color (default var(--bento-accent); CSS variables are resolved to rgba), startAnimationDelay (s, default 0), once (default false: replays each time it enters the viewport).

Anatomy: a 300px-tall, overflow-hidden block with 40px top padding. The chart is a 600 × 200 SVG: the line peaks at 80% of the height, is drawn with smoothing 0.2, 2px stroke, round caps, over a gradient fill from 30% to 0% of the colour. A 2px guide line drops from 60% of the height. The pill is NumberFlowCounter.

Behaviour: when in view, the fill fades and scales in from 0.95 over 0.8s, the line draws over 1.5s easeInOut, the midpoint dot pops in (0.4s, backOut) and three rings pulse from it (2s loops, 0.67s apart). The pill fades in over 300ms and rolls to the next value every 2s. No reduced-motion branch.

Don't feed it real KPIs expecting axes or scale: the line is normalised to its own maximum.

Facts#

API#

TypeScript declarations emitted from components/third-bento-animation.tsx.

interface LineChartProps {
    data: number[];
    height?: number;
    width?: number;
    color: string;
    shouldAnimate: boolean;
    startAnimationDelay?: number;
}
export declare function LineChart({ data, height, width, color, shouldAnimate, startAnimationDelay, }: LineChartProps): JSX.Element;
export declare function NumberFlowCounter({ toolTipValues, shouldAnimate, startAnimationDelay, }: {
    toolTipValues: number[];
    shouldAnimate: boolean;
    startAnimationDelay?: number;
}): JSX.Element;
export declare function ThirdBentoAnimation({ data, toolTipValues, color, startAnimationDelay, once, }: {
    data: number[];
    toolTipValues: number[];
    color?: string;
    startAnimationDelay?: number;
    once?: boolean;
}): JSX.Element;

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "relative flex items-center justify-center overflow-hidden rounded-xl border" },
      h(DC.ThirdBentoAnimation, { data: [20, 30, 25, 45, 40, 55, 75], toolTipValues: [1234, 1678, 2101, 2534, 2967, 3400, 3833, 4266, 4700, 5133] }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Motion#