Design
llms.txt digitalcrew.tech

Motion

NumberFlowCounter

A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow).

Crew OSMotionDigitalCrew.NumberFlowCounter
NumberFlowCounter · liveOpen

Guidelines#

Use it for the ticking value above the line in ThirdBentoAnimation. It is positioned for that tile, so treat it as part of that vignette rather than a general counter.

What you provide: toolTipValues (the numbers to cycle through, required), shouldAnimate (show and start cycling), startAnimationDelay (s before it appears, default 0). There is no className or position prop.

Anatomy: absolutely positioned top-32 left-[42%] -translate-x-1/2 (128px from the top of its positioned parent), 32px tall, rounded-full, px-4 py-1, bg-[#1A1B25] with a 7% white border, white text-sm font-mono digits, an inset top highlight and soft navy shadows. Values use grouping separators (1,234).

Behaviour: fades in over 300ms ease-in-out once shouldAnimate is true (after startAnimationDelay); every 2s it moves to the next value, and NumberFlow rolls the changed digits over 700ms ease-out. Setting shouldAnimate to false hides it. No reduced-motion branch.

Don't use it for figures the user must read at a glance (the value keeps changing), or outside a relative parent.

Facts#

GroupMotion
ProductCrew OS
Globalwindow.DigitalCrew.NumberFlowCounter
Sourcedigitalcrew-orchestrator: components/third-bento-animation.tsx
Import in the appimport { NumberFlowCounter } from "@/components/third-bento-animation";

API#

TypeScript declarations emitted from components/third-bento-animation.tsx (the module also exports ThirdBentoAnimation, NumberFlowCounter).

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#

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 h-[184px] overflow-hidden rounded-xl border" },
      h("div", { className: "p-5" },
        h("p", { className: "text-sm font-medium" }, "Prospects enriched this month"),
        h("p", { className: "text-muted-foreground text-xs" }, "Updates as Max works through the list")),
      h(DC.NumberFlowCounter, { toolTipValues: [1234, 1678, 2101, 2534, 2967, 3400], shouldAnimate: true }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
ActionFocusSessionCardResizeChapterScrubberContainerScrollFeatureSlideshowFirstBentoAnimationFourthBentoAnimationHyperTextInfiniteSliderJoyfulTaskCheckboxLottieMarqueeMotionScaleOrbitingCirclesShimmerTextSignatureGradientSkeletonRevealStreamingTextThirdBentoAnimationUniboxMotion