{ "id": "motion:motion-bg-color-transition", "slug": "motion-bg-color-transition", "kind": "motion", "title": { "ja": "背景色トランジション", "en": "Background color transition" }, "aiName": "Background color transition", "summary": { "ja": "背景色がなめらかに変わる", "en": "The background colour changes smoothly from one section to the next" }, "number": 15, "group": "scroll-linked", "techniques": [ "scroll-progress", "css-transition" ], "rules": [ { "ja": "背景色は :root の名前だけで指定する", "en": "Background colours come only from the named custom properties in :root" }, { "ja": "背景を切り替えるのは、画面中央を横切る区画の tone 1 つだけ", "en": "Only the one section crossing the viewport centre sets the tone" }, { "ja": "動きを減らす設定では、切り替えを即時にする", "en": "With reduced motion, switch the tone instantly" } ], "reproduction": { "prompt": { "ja": "背景色トランジション — Background color transition\n\n画面を 4 つの区画（各 100vh）に分け、それぞれに tone の名前（ground、surface、accent-soft、ink）を持たせる。\n画面の中央を横切っている区画の tone を body の data-tone に書き、背景色を 0.6 秒の transition で切り替える。\nink の区画だけは背景を ink、文字色を ground に切り替え、補助の文字は surface で読めるようにする。\n色は :root の 4 つの名前（--ground、--surface、--accent-soft、--ink）と var() だけで指定し、16 進数は書かない。\n中央を横切る区画の判定は getBoundingClientRect だけで行い、ライブラリは使わない。\n\n外すと崩れる点:\n- 背景色は :root の名前だけで指定する\n- 背景を切り替えるのは、画面中央を横切る区画の tone 1 つだけ\n- 動きを減らす設定では、切り替えを即時にする\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-bg-color-transition/demo.html", "en": "Background color transition — Background color transition\n\nDivide the page into four full-height sections, each named by a tone: ground, surface, accent-soft, and ink. When a section crosses the vertical centre of the viewport, write its tone to the body's data-tone attribute and transition background-color over 0.6 s.\nThe ink tone also switches the text to ground, with supporting text in surface so it stays readable.\nUse only the four named custom properties --ground, --surface, --accent-soft and --ink from :root, with no hex or rgb values.\nDetect the section that crosses the centre with getBoundingClientRect in plain JavaScript, with no libraries.\n\nDo not drop:\n- Background colours come only from the named custom properties in :root\n- Only the one section crossing the viewport centre sets the tone\n- With reduced motion, switch the tone instantly\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-bg-color-transition/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-bg-color-transition/demo.html", "html": "\n\n\n\n\n15 背景色トランジション — Background color transition\n\n\n\n
\n
\n

15

\n

背景色トランジション

\n

Background color transition

\n

背景色がなめらかに変わる

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。区画が画面の中央に来ると、背景色がゆっくり切り替わります。

\n
\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。背景は面の色に変わります。

\n
\n
\n
\n
\n

Section 3

\n

見出しが入ります

\n

本文のダミーです。背景は淡い強調色に変わります。

\n
\n
\n
\n
\n

Section 4

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