# ThirdBentoAnimation

> An insight vignette for the bento grid: a smooth area line draws itself, a dot pulses at its midpoint and a dark pill above it ticks through values.

## Facts

- **Product**: Crew OS
- **Family**: Motion
- **Global**: `window.DigitalCrew.ThirdBentoAnimation`
- **Source**: `digitalcrew-orchestrator: components/third-bento-animation.tsx`
- **Import in the app**: `import { ThirdBentoAnimation } from "@/components/third-bento-animation";`
- **Live preview**: /design/components/third-bento-animation/preview.html
- **Page**: /design/components/third-bento-animation

## Guidelines

**Use it for** the "Instant insight reporting" tile of [`BentoSection`](/design/components/bento-section.md), or any tile that needs a lightweight "metrics going up" motion. It is not a data chart: use [`ChartContainer`](/design/components/chart-container.md) for real numbers.

**What you provide**: `data` (the y values, required; [`BentoSection`](/design/components/bento-section.md) 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`](/design/components/number-flow-counter.md).

**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.

## API

```ts
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;
```

## Example

```html
<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

- [ActionFocusSession](/design/components/action-focus-session.md): The focus timebox for one task in the actions cockpit: a live billable clock with approve, start, pause, run and done, and a burst of sparkles on completion.
- [CardResize](/design/components/card-resize.md): A container that tweens its width and height when its content changes (`.t-resize`).
- [ChapterScrubber](/design/components/chapter-scrubber.md): A rail of ticks, one per chapter, that swell like a dock under the pointer, with a card previewing the hovered chapter.
- [ContainerScroll](/design/components/container-scroll.md): A hero block where a device-like frame starts tilted back in 3D and straightens as the page scrolls, with the title drifting up.
- [FeatureSlideshow](/design/components/feature-slideshow.md): A step-by-step feature explainer: an accordion of steps on the left that advances on a timer, a progress line on the open step, and a large media slot on the right.
- [FirstBentoAnimation](/design/components/first-bento-animation.md): A self-playing chat vignette for the bento grid: a user asks for a meeting slot, the Digital Crew avatar shows typing dots, then the reply streams in as a `Reasoning` block.
- [FourthBentoAnimation](/design/components/fourth-bento-animation.md): A scheduling vignette for the bento grid: a week ruler, three task bars that spring into place, and a time cursor that follows the pointer.
- [HyperText](/design/components/hyper-text.md): A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right.
- [InfiniteSlider](/design/components/infinite-slider.md): A JavaScript-driven endless strip (Framer Motion) that renders its children twice and slides them in a loop, optionally slowing on hover.
- [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md): A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness.
- [Lottie](/design/components/lottie.md): The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`).
- [Marquee](/design/components/marquee.md): An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables.
- [MotionScale](/design/components/motion-scale.md): The shared motion scale made visible: the same distance travelled on each duration token and each easing, with a Replay button.
- [NumberFlowCounter](/design/components/number-flow-counter.md): A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow).
- [OrbitingCircles](/design/components/orbiting-circles.md): Places its children on a circular orbit around the centre of the parent and spins them, with an optional faint ring for the path.
- [ShimmerText](/design/components/shimmer-text.md): A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (`.t-shimmer`).
- [SignatureGradient](/design/components/signature-gradient.md): The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms.
- [SkeletonReveal](/design/components/skeleton-reveal.md): A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`).
- [StreamingText](/design/components/streaming-text.md): Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`).
- [UniboxMotion](/design/components/unibox-motion.md): The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.