# Seed Design Breeze
> file: components/animate-number.mdx
---
# Seed Design Breeze Documentation
Source: https://seed-design.io/breeze/llms-full.txt
---
file: components/animate-number.mdx
# Animate Number
숫자를 부드럽게 애니메이션하는 유틸리티 컴포넌트
```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 (
setValue(value - 1)}>
-1
setValue(value + 1)}>
+1
);
}
```
## Installation
Dependency:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Snippet:
npm
pnpm
yarn
bun
```bash
npx @seed-design/cli@latest add breeze:animate-number
```
```bash
pnpm dlx @seed-design/cli@latest add breeze:animate-number
```
```bash
yarn dlx @seed-design/cli@latest add breeze:animate-number
```
```bash
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 {children};
}
```
```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(
)
```
## Props
{"표시할 숫자 값"}
},
fontSize: {
"type": "string | number | undefined",
"default": "48",
"required": false,
description: <>{"폰트 크기"}
},
fontWeight: {
"type": "Property.FontWeight | undefined",
"default": "\"bold\"",
"required": false,
description: <>{"폰트 굵기"}
},
color: {
"type": "string | undefined",
"default": "\"currentColor\"",
"required": false,
description: <>{"텍스트 색상"}
},
showComma: {
"type": "boolean | undefined",
"default": "false",
"required": false,
description: <>{"천 단위 구분 쉼표 표시"}
},
showGradient: {
"type": "boolean | undefined",
"default": "false",
"required": false,
description: <>{"위아래 그라디언트 마스크 표시"}
},
gradientHeight: {
"type": "number | undefined",
"default": "20",
"required": false,
description: <>{"그라디언트 마스크 높이 (px)"}
},
containerStyle: {
"type": "React.CSSProperties | undefined",
"default": undefined,
"required": false,
description: <>{"컨테이너 스타일"}
},
className: {
"type": "string | undefined",
"default": undefined,
"required": false,
description: <>{"추가 클래스명"}
}
}}
/>
## 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 (
setValue(Math.floor(Math.random() * 99999) + 1)}
>
랜덤 숫자 (1-99999)
);
}
```
### 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 (
setValue(Math.floor(Math.random() * 99999) + 1)}
>
랜덤 숫자 (1-99999)
);
}
```
### 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 (
setValue(Math.floor(Math.random() * 99999) + 1)}
>
랜덤 숫자
);
}
```