本文へ移動

§01-16Data Visualization

カウンターアニメ

数値が目標値まで滑らかにカウントアップする。

数値が動いて目標値に到達する様子を見せ、その値に注目を集める。実績や達成数など、ひとつの数字で成果を伝える場面に向く。

実装のポイント

requestAnimationFrame で経過時間から easeOutCubic の進捗を計算し、unmount 時に止める。tabular-nums で桁幅を固定し揺れを防ぐ。

同じデモを使うパターン:Number tick animation

特徴
  • アニメーション
  • ブラウザ API
デモで使っているもの
  • motion
  • shadcn/ui
  • lucide-react
  • requestAnimationFrame

このパターンが効く目的