FourthBentoAnimation

Guidelines#

Use it for the "Smart automation" tile of BentoSection. The labels ("Bento grid", "Landing Page", "Add Task", "Tue"–"Sat", "12:00 AM") are fixed demo copy.

What you provide: once (default false: bars fly out again when it leaves the viewport) and startAnimationDelay (s, default 0). Give the parent a height and isolate (the ruler sits at -z-10).

Anatomy: a dashed ruler of half-width columns with 20px bg-primary ticks, masked to fade at top and bottom; day labels in text-sm text-gray-500. The cursor is a 2px line from black (dark: accent) to transparent, with a 24px-tall black (dark:bg-accent) time label, text-xs, rounded-md. Bars are 250px wide, 32px tall, rounded-lg, text-sm font-medium: bg-secondary text-white (dark:bg-neutral-700), bg-secondary/40 text-white (dark:bg-neutral-800) and a dashed bg-secondary/20 outline bar. With Crew OS's light secondary the white labels are low-contrast in light themes.

Behaviour: in view, bars slide from alternate sides into a staircase with a spring (stiffness 220, damping 18), 0.2s apart. Moving the pointer drives the cursor through a spring (damping 50, stiffness 400); leaving recentres it. No reduced-motion branch.

Don't use it as a real timeline: nothing is data-driven.

Facts#

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

API#

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

interface FourthBentoAnimationProps {
    startAnimationDelay?: number;
    once?: boolean;
}
export declare function FourthBentoAnimation({ once, startAnimationDelay, }: FourthBentoAnimationProps): 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() {
    return h("div", { className: "relative isolate h-[340px] overflow-hidden rounded-xl border" }, h(DC.FourthBentoAnimation, { once: false }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Motion#