{ "id": "motion:motion-count-up", "slug": "motion-count-up", "kind": "motion", "title": { "ja": "カウントアップ", "en": "Count-up" }, "aiName": "Count-up animation", "summary": { "ja": "数字が0から増えていく", "en": "Numbers count up from zero to their final value" }, "number": 8, "group": "appear", "techniques": [ "intersection-observer", "css-transition" ], "rules": [ { "ja": "数値は 0 から最終値へ一方向に増え、途中で戻さない", "en": "The number only counts up from 0 to its final value and never goes back" }, { "ja": "最終値は HTML に残し、JS が動かない場合も読める", "en": "Keep the final value in the HTML so it reads without JavaScript" }, { "ja": "動きを減らす設定では最終値と棒の全長を即表示する", "en": "With reduced motion, show the final values and full-length bars immediately" } ], "reproduction": { "prompt": { "ja": "カウントアップ — Count-up animation\n\n4 つの数値が、それぞれ画面に入ったときに 0 から最終値まで増えるカウントアップを作ってください。最終値は 1,280、98.6（%）、42、3.2（秒）です。1 つの数値は 1.6 秒かけて増え、緩急は easeOut（1 − (1 − t)³）でつけます。requestAnimationFrame で毎フレーム値を書き換え、桁の揃う font-variant-numeric: tabular-nums を使います。数値の下には高さ 4px の棒を置き、同じ 1.6 秒で transform の scaleX を 0 から 1 へ伸ばしてください。各区画は画面の下端から 50% 入ったところで一度だけ開始します。CSS と IntersectionObserver だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 数値は 0 から最終値へ一方向に増え、途中で戻さない\n- 最終値は HTML に残し、JS が動かない場合も読める\n- 動きを減らす設定では最終値と棒の全長を即表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-count-up/demo.html", "en": "Count-up — Count-up animation\n\nBuild a count-up effect where four numbers count from 0 to their final values when each enters the viewport. The final values are 1,280, 98.6 (%), 42, and 3.2 (seconds). Each number counts up over 1.6 seconds with an easeOut curve, 1 − (1 − t)³. Rewrite the value on every frame with requestAnimationFrame, and use font-variant-numeric: tabular-nums so the digits align. Place a 4px-high bar under each number and grow it from transform: scaleX(0) to scaleX(1) over the same 1.6 seconds. Each section starts once, when 50% of it is inside the viewport's bottom edge. Implement it with CSS and IntersectionObserver only, without any library.\n\nDo not drop:\n- The number only counts up from 0 to its final value and never goes back\n- Keep the final value in the HTML so it reads without JavaScript\n- With reduced motion, show the final values and full-length bars immediately\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-count-up/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-count-up/demo.html", "html": "\n\n\n\n\n08 カウントアップ — Count-up animation\n\n\n\n
\n
\n

08

\n

カウントアップ

\n

Count-up animation

\n

数字が0から増えていく

\n

SCROLL ↓

\n
\n
\n\n
\n
\n

Metric 01

\n

1,280件

\n
\n

項目の説明が入ります。

\n
\n
\n

Metric 02

\n

98.6%

\n
\n

項目の説明が入ります。

\n
\n
\n

Metric 03

\n

42点

\n
\n

項目の説明が入ります。

\n
\n
\n

Metric 04

\n

3.2秒

\n
\n

項目の説明が入ります。

\n
\n
\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-count-up", "en": "https://design-vault.pages.dev/en/designs/motion-count-up", "json": "https://design-vault.pages.dev/ai/assets/motion-count-up.json", "designJson": null } }