SEED Design

Animate Number

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

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 install motion

Snippet:

npx @seed-design/cli@latest add breeze:animate-number

Configuration

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

자세한 내용은 Motion Lazy Motion 문서를 참고하세요.

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>;
}
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

Prop

Type

Examples

Comma

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

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

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>
  );
}

Last updated on

On this page

InstallationConfigurationPropsExamplesCommaGradientCustom Style