{ "id": "motion:motion-odometer-roll", "slug": "motion-odometer-roll", "kind": "motion", "title": { "ja": "オドメーター", "en": "Odometer" }, "aiName": "Odometer digit roll", "summary": { "ja": "桁ごとに数字が回って止まる", "en": "Each digit rolls on its own reel and settles in turn" }, "number": 29, "group": "text-motion", "techniques": [ "intersection-observer", "css-transition" ], "rules": [ { "ja": "各桁は 0〜9 の帯を transform で送る。文字を書き換えて数えない", "en": "Move a 0–9 strip per digit with transform; do not count by rewriting text" }, { "ja": "左の桁から 120ms ずつ遅らせて止め、全桁を同時に止めない", "en": "Stop the digits 120ms apart from the left, never all at once" }, { "ja": "画面に入ったら一度だけ回し、止まった数値は戻っても動かさない", "en": "Roll once on entering the viewport; a settled number stays put" }, { "ja": "JS が動かない場合と動きを減らす設定では、最終値を止めて見せる", "en": "Without JavaScript or with reduced motion, show the final value at rest" } ], "reproduction": { "prompt": { "ja": "オドメーター — Odometer digit roll\n\n4 桁の数値を、桁ごとに数字が縦に回って止まるオドメーターとして作ってください。各桁は高さ 1 段ぶんの窓（overflow: hidden）で、中に 0〜9 を縦に並べた帯を置き、帯を transform の translateY で「止まる数字 × −10%」まで送ります。送る時間は 1 桁あたり 1.2 秒、緩急は cubic-bezier(.2, .7, .2, 1) で、左の桁から 120ms ずつ遅らせて順に止めます。開始は区画が画面に 50% 入ったときの一度だけで、戻っても巻き戻しません。数字には font-variant-numeric: tabular-nums を使い、最終値は aria-label にも書いてください。CSS の transition と IntersectionObserver だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 各桁は 0〜9 の帯を transform で送る。文字を書き換えて数えない\n- 左の桁から 120ms ずつ遅らせて止め、全桁を同時に止めない\n- 画面に入ったら一度だけ回し、止まった数値は戻っても動かさない\n- JS が動かない場合と動きを減らす設定では、最終値を止めて見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-odometer-roll/demo.html", "en": "Odometer — Odometer digit roll\n\nBuild a four-digit number as an odometer, where each digit rolls vertically on its own reel and settles. Each digit is a window one row high (overflow: hidden) holding a strip of 0–9 stacked vertically, and the strip moves with transform: translateY to \"final digit × −10%\". Each reel takes 1.2 seconds with cubic-bezier(.2, .7, .2, 1), and the digits stop in order from the left, each delayed by 120ms. Start once, when 50% of the section is inside the viewport, and never rewind on scrolling back. Use font-variant-numeric: tabular-nums for the digits and put the final value in an aria-label as well. Implement it with CSS transitions and IntersectionObserver only, without any library.\n\nDo not drop:\n- Move a 0–9 strip per digit with transform; do not count by rewriting text\n- Stop the digits 120ms apart from the left, never all at once\n- Roll once on entering the viewport; a settled number stays put\n- Without JavaScript or with reduced motion, show the final value at rest\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-odometer-roll/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-odometer-roll/demo.html", "html": "\n\n\n\n\n29 オドメーター — Odometer digit roll\n\n\n\n

オドメーター

Odometer digit roll

桁ごとに数字が回って止まる

SCROLL ↓

\n\n

Counter 01

\n \n 0123456789\n 0123456789\n 0123456789\n 0123456789\n \n 件\n

項目の説明が入ります。

Counter 02

\n \n 0123456789\n 0123456789\n 0123456789\n 0123456789\n \n 回\n

項目の説明が入ります。

Counter 03

\n \n 0123456789\n 0123456789\n 0123456789\n 0123456789\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-odometer-roll", "en": "https://design-vault.pages.dev/en/designs/motion-odometer-roll", "json": "https://design-vault.pages.dev/ai/assets/motion-odometer-roll.json", "designJson": null } }