{ "id": "motion:motion-bar-grow", "slug": "motion-bar-grow", "kind": "motion", "title": { "ja": "バーの成長", "en": "Bars grow" }, "aiName": "Chart bars grow on view", "summary": { "ja": "グラフの棒が伸び、数値が付く", "en": "Chart bars grow to height as they come into view, and their values count up" }, "number": 38, "group": "lp-section", "techniques": [ "intersection-observer" ], "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 values in the HTML and the table so they read without JavaScript" }, { "ja": "動きを減らす設定では、棒の全長と最終値を即表示する", "en": "With reduced motion, show full-height bars and final values immediately" } ], "reproduction": { "prompt": { "ja": "バーの成長 — Chart bars grow on view\n\n月別の達成率を示す 6 本の棒グラフを作ってください。グラフが画面の下端から 50% 入ったら、棒が下から上へ伸び、先端の数値が 0% から最終値まで同時にカウントアップします。各棒は前の棒より 90ms 遅れて始まり、1 本の伸びは 0.7 秒、緩急は easeOut（1 − (1 − t)³）でつけます。最終値は 38%、52%、47%、68%、81%、94% で、最新の月だけアクセント色、残りは控えめな色で描きます。数値は表にも書き、JS が動かなくても読めるようにします。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 数値は 0 から最終値へ一方向に増え、途中で戻さない\n- 最終値は HTML と表に残し、JS が動かなくても読める\n- 動きを減らす設定では、棒の全長と最終値を即表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-bar-grow/demo.html", "en": "Bars grow — Chart bars grow on view\n\nBuild a bar chart of six monthly achievement rates. When the chart is 50% inside the bottom edge of the viewport, each bar grows upward from its baseline while its value counts up from 0% to the final value. Each bar starts 90ms after the previous one, and each growth takes 0.7 seconds with an easeOut curve, 1 − (1 − t)³. The final values are 38%, 52%, 47%, 68%, 81%, and 94%; the latest month uses the accent colour and the rest use a quiet muted colour. Also write the values in a table so they read without JavaScript. Implement it with CSS and JavaScript 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 values in the HTML and the table so they read without JavaScript\n- With reduced motion, show full-height bars and final values immediately\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-bar-grow/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-bar-grow/demo.html", "html": "\n\n\n\n\n38 バーの成長 — Chart bars grow on view\n\n\n\n
\n
\n

38

\n

バーの成長

\n

Chart bars grow on view

\n

グラフの棒が伸び、数値が付く

\n

SCROLL ↓

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

Monthly

\n

見出しが入ります

\n

本文のダミーです。グラフは画面に入ると一度だけ伸びます。

\n
\n\n
\n

Chart

\n

月別の達成率

\n
\n
38%1月
\n
52%2月
\n
47%3月
\n
68%4月
\n
81%5月
\n
94%6月
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n
表で読む
月達成率
1月38%
2月52%
3月47%
4月68%
5月81%
6月94%
\n
\n\n
\n
\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-bar-grow", "en": "https://design-vault.pages.dev/en/designs/motion-bar-grow", "json": "https://design-vault.pages.dev/ai/assets/motion-bar-grow.json", "designJson": null } }