# FirstBentoAnimation

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

## Facts

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

## Guidelines

**Use it for** the "Real-time AI collaboration" tile of [`BentoSection`](/design/components/bento-section.md), or any marketing tile that needs to show an agent answering. It takes no props; the copy is fixed in the component.

**What you provide**: a `relative` parent with a height and `overflow-hidden` (bento tiles are 420px tall, 480px from `sm`, 500px from `md`). The component fills it.

**Anatomy**: the conversation is `max-w-md`, centred. The user bubble is at most 280px, `bg-secondary text-white`, 16px padding, `rounded-2xl`, with a 32px round avatar. The agent side is a 40px round `bg-background` badge with the Crew logo, then either three 8px `bg-primary/50` typing dots in a bordered `rounded-2xl` bubble or the reply in a `bg-accent` bordered `rounded-xl` card (at least 220px, 300px from `md`). A bottom `from-background` fade (80px) covers the overflow. In light themes the white-on-`secondary` user bubble is low-contrast; the avatar comes from randomuser.me, unreachable here (shown as a muted disc).

**Behaviour**: once in view it waits 1s, then the thread springs up 75px (stiffness 300, damping 20), the dots bounce (0.6s loops, 0.2s apart) and are swapped for the reply, which types out at [`ResponseStream`](/design/components/response-stream.md)'s default speed. Leaving the viewport resets it. No reduced-motion branch.

**Don't** reuse it for real conversations: the text is demo copy.

## API

```ts
export declare function ReasoningBasic(): JSX.Element;
export declare function FirstBentoAnimation(): 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() {
    // The user avatar is hard-coded to randomuser.me, which cannot load here: show it as a plain muted disc.
    return h("div", { className: "relative flex h-[340px] items-center justify-center overflow-hidden rounded-xl border [&_img]:bg-muted [&_img]:text-[0px]" }, h(DC.FirstBentoAnimation));
  }
  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.
- [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`).
- [ThirdBentoAnimation](/design/components/third-bento-animation.md): 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.
- [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.