> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Number Ticker

> Animated number counting effect.

* **Location**: `sabo/src/components/ui/number-ticker.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "120px", pointerEvents: "none" }}
      title="Number Ticker"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
*{box-sizing:border-box}body{margin:0;background:#ffffff;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue'}
.wrap{height:100px;display:flex;align-items:center;justify-content:center}
.num{font-size:36px;font-weight:800;letter-spacing:.5px}
</style></head><body>
<div class='wrap'><div id='n' class='num'>0</div></div>
<script>
  const el=document.getElementById('n');
  const target=12345; const dur=1500; const start=performance.now();
  function tick(t){const p=Math.min(1,(t-start)/dur); const v=Math.floor(target*(1-Math.pow(1-p,3))); el.textContent=v.toLocaleString(); if(p<1) requestAnimationFrame(tick)}
  requestAnimationFrame(tick);
  setInterval(()=>{requestAnimationFrame(()=>{const s=performance.now(); function t(ti){const p=Math.min(1,(ti-s)/dur); const v=Math.floor(target*(1-Math.pow(1-p,3))); el.textContent=v.toLocaleString(); if(p<1) requestAnimationFrame(t)}; requestAnimationFrame(t)})}, 2200);
</script>
</body></html>`}
    />
  </div>
</Frame>

## When to use

* Show KPI counts that animate into place (e.g., “12,345 users”).
* Prefer short ranges to avoid long-running animations.

## Usage

```tsx sabo/src/components/ui/number-ticker.tsx theme={null}
"use client";
import { NumberTicker } from "@/components/ui/number-ticker";

export function Example() {
  return (
    <NumberTicker
      value={12345}
      startValue={0}
      decimalPlaces={0}
      className="text-4xl font-extrabold"
    />
  );
}
```

## Key props

<ParamField path="value" type="number">
  The target number to animate to.
</ParamField>

<ParamField path="startValue" type="number" default="0">
  The number to start the animation from.
</ParamField>

<ParamField path="direction" type="'up' | 'down'" default="'up'">
  Animation direction: count up or down to the target value.
</ParamField>

<ParamField path="delay" type="number" default="0">
  Delay in seconds before starting the animation.
</ParamField>

<ParamField path="decimalPlaces" type="number" default="0">
  Number of decimal places to display.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes applied to the span element.
</ParamField>

## Styling tip

* Use large, bold typography and monospace figures for consistent width (`tabular-nums`).
* Avoid combining with other animations in the same viewport to reduce motion overload.
