§01-16Data Visualization
カウンターアニメ
数値が目標値まで滑らかにカウントアップする。
数値が動いて目標値に到達する様子を見せ、その値に注目を集める。実績や達成数など、ひとつの数字で成果を伝える場面に向く。
実装のポイント
requestAnimationFrame で経過時間から easeOutCubic の進捗を計算し、unmount 時に止める。tabular-nums で桁幅を固定し揺れを防ぐ。
同じデモを使うパターン:Number tick animation
- 特徴
- アニメーション
- ブラウザ API
- デモで使っているもの
- motion
- shadcn/ui
- lucide-react
- requestAnimationFrame