# Number flow: Timing

> Tune the motion with `duration` and `easing`, or turn it off with `animated={false}`. Reduced motion settings turn it off automatically.

Example: https://hextaui.com/docs/number-flow/examples/timing
Component docs: https://hextaui.com/docs/number-flow.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/number-flow-timing.json
```

This adds `components/examples/number-flow/timing.tsx` with the Number flow component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/number-flow/timing.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { NumberFlow } from "@/components/ui/number-flow"

export function NumberFlowTiming() {
  const [value, setValue] = React.useState(128)

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div className="flex flex-col gap-1 rounded-lg border p-3">
          <span className="text-xs text-muted-foreground">200ms</span>
          <NumberFlow
            value={value}
            duration={200}
            className="text-2xl font-semibold"
          />
        </div>
        <div className="flex flex-col gap-1 rounded-lg border p-3">
          <span className="text-xs text-muted-foreground">600ms</span>
          <NumberFlow value={value} className="text-2xl font-semibold" />
        </div>
        <div className="flex flex-col gap-1 rounded-lg border p-3">
          <span className="text-xs text-muted-foreground">1200ms</span>
          <NumberFlow
            value={value}
            duration={1200}
            easing="ease-in-out"
            className="text-2xl font-semibold"
          />
        </div>
        <div className="flex flex-col gap-1 rounded-lg border p-3">
          <span className="text-xs text-muted-foreground">Off</span>
          <NumberFlow
            value={value}
            animated={false}
            className="text-2xl font-semibold"
          />
        </div>
      </div>
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setValue(value + 37)}
      >
        +37
      </Button>
    </div>
  )
}
```

## Props in this example

### NumberFlow

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | – | Required. |
| `duration` | `number` | `600` | Spin duration in milliseconds. |
| `easing` | `string` | `easeSpring` | Any CSS easing value. |
| `animated` | `boolean` | `true` |  |

## More Number flow examples

- [Only changed digits move](https://hextaui.com/docs/number-flow/examples/changed-digits.md)
- [Trend](https://hextaui.com/docs/number-flow/examples/trend.md)
- [Formats](https://hextaui.com/docs/number-flow/examples/formats.md)
- [Interruptions and events](https://hextaui.com/docs/number-flow/examples/events.md)
- [Inline and in badges](https://hextaui.com/docs/number-flow/examples/inline.md)
- [Right to left](https://hextaui.com/docs/number-flow/examples/rtl.md)