FirstBentoAnimation

Guidelines#

Use it for the "Real-time AI collaboration" tile of BentoSection, 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's default speed. Leaving the viewport resets it. No reduced-motion branch.

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

Facts#

Group	Motion
Product	Crew OS
Global	window.DigitalCrew.FirstBentoAnimation
Source	digitalcrew-orchestrator: components/first-bento-animation.tsx
Import in the app	import { FirstBentoAnimation } from "@/components/first-bento-animation";

API#

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

export declare function ReasoningBasic(): JSX.Element;
export declare function FirstBentoAnimation(): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

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