# Animate Number
URL: /breeze/components/animate-number
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/breeze/components/animate-number.mdx

숫자를 부드럽게 애니메이션하는 유틸리티 컴포넌트

## Preview

```tsx
import AnimateNumber from "seed-design/breeze/animate-number/animate-number";
import { ActionButton } from "seed-design/ui/action-button";
import { HStack } from "@seed-design/react";
import { useState } from "react";

export default function AnimateNumberPreview() {
  const [value, setValue] = useState(1);

  return (
    <div className="flex flex-col items-center gap-8">
      <AnimateNumber
        value={value}
        fontSize="6rem"
        fontWeight="bold"
        color="#333"
        showComma
        showGradient
        gradientHeight={10}
      />
      <HStack gap="10px">
        <ActionButton size="small" variant="neutralSolid" onClick={() => setValue(value - 1)}>
          -1
        </ActionButton>
        <ActionButton size="small" variant="neutralSolid" onClick={() => setValue(value + 1)}>
          +1
        </ActionButton>
      </HStack>
    </div>
  );
}
```

## Installation

Dependency:

- npm: npm install motion
- pnpm: pnpm add motion
- yarn: yarn add motion
- bun: bun add motion

Snippet:

- npm: npx @seed-design/cli@latest add breeze:animate-number
- pnpm: pnpm dlx @seed-design/cli@latest add breeze:animate-number
- yarn: yarn dlx @seed-design/cli@latest add breeze:animate-number
- bun: bun x @seed-design/cli@latest add breeze:animate-number

## Configuration

animate-number 컴포넌트는 motion의 `m.` 컴포넌트를 사용합니다. lazy loading을 위해 프로젝트에 MotionProvider를 설정해야 합니다.

자세한 내용은 [Motion Lazy Motion 문서](https://motion.dev/docs/react-lazy-motion)를 참고하세요.

```tsx title="MotionProvider.tsx"
"use client";

import { LazyMotion } from "motion/react";
import type { ReactNode } from "react";

const loadFeatures = () => import("motion/react").then((res) => res.domAnimation);

export function MotionProvider({ children }: { children: ReactNode }) {
  return <LazyMotion features={loadFeatures}>{children}</LazyMotion>;
}
```

```tsx title="index.tsx"
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { MotionProvider } from './MotionProvider.tsx'

createRoot(document.getElementById('root')!).render(
  <MotionProvider>
    <App />
  </MotionProvider>
)
```

## Props

## Examples

### Comma

```tsx
import AnimateNumber from "seed-design/breeze/animate-number/animate-number";
import { ActionButton } from "seed-design/ui/action-button";
import { useState } from "react";

export default function AnimateNumberComma() {
  const [value, setValue] = useState(1234);

  return (
    <div className="flex flex-col items-center gap-6">
      <AnimateNumber value={value} fontSize="3rem" showComma />

      <ActionButton
        size="small"
        variant="neutralSolid"
        onClick={() => setValue(Math.floor(Math.random() * 99999) + 1)}
      >
        랜덤 숫자 (1-99999)
      </ActionButton>
    </div>
  );
}
```

### Gradient

```tsx
import AnimateNumber from "seed-design/breeze/animate-number/animate-number";
import { ActionButton } from "seed-design/ui/action-button";
import { useState } from "react";

export default function AnimateNumberGradient() {
  const [value, setValue] = useState(999);

  return (
    <div className="flex flex-col items-center gap-6">
      <AnimateNumber value={value} fontSize="4rem" showGradient gradientHeight={20} />

      <ActionButton
        size="small"
        variant="neutralSolid"
        onClick={() => setValue(Math.floor(Math.random() * 99999) + 1)}
      >
        랜덤 숫자 (1-99999)
      </ActionButton>
    </div>
  );
}
```

### Custom Style

```tsx
import AnimateNumber from "seed-design/breeze/animate-number/animate-number";
import { ActionButton } from "seed-design/ui/action-button";
import { HStack } from "@seed-design/react";
import { useState } from "react";

export default function AnimateNumberCustomStyle() {
  const [value, setValue] = useState(42);

  return (
    <div className="flex flex-col items-center gap-6">
      <AnimateNumber
        value={value}
        fontSize="2.5rem"
        fontWeight="600"
        color="#FF6B00"
        containerStyle={{ padding: "1rem" }}
      />

      <HStack gap="10px">
        <ActionButton
          size="small"
          variant="neutralSolid"
          onClick={() => setValue(Math.floor(Math.random() * 99999) + 1)}
        >
          랜덤 숫자
        </ActionButton>
      </HStack>
    </div>
  );
}
```