{ "id": "motion:motion-blend-invert", "slug": "motion-blend-invert", "kind": "motion", "title": { "ja": "ブレンド反転", "en": "Blend invert" }, "aiName": "mix-blend-mode invert", "summary": { "ja": "重なった所だけ色が反転する", "en": "Only the parts where shapes overlap invert in colour" }, "number": 43, "group": "ambient", "techniques": [ "mix-blend-mode", "position-sticky", "scroll-progress" ], "rules": [ { "ja": "反転は円と重なった部分だけに起き、円の外の地色は変えない", "en": "Inversion happens only where the disc overlaps; the ground outside it stays unchanged" }, { "ja": "円の色は var(--ground) の 1 色だけで、区画ごとに変えない", "en": "The disc is one colour, var(--ground), and never changes per zone" }, { "ja": "文字は円の外に置き、ブレンドが効かなくても読める", "en": "Copy sits outside the disc so it stays readable even without blending" }, { "ja": "動きを減らす設定では、区画の境目が円の中央に来た状態で止める", "en": "With reduced motion, a zone boundary stays centred on the disc" } ], "reproduction": { "prompt": { "ja": "ブレンド反転 — mix-blend-mode invert\n\n直径 50vmin の固定した円を画面の中央に置き、色を `var(--ground)` にして `mix-blend-mode: difference` で重ねる。\nその下に地色の異なる区画を 3 つ縦に並べる（白、濃紺、青）。区画は 300vh の sticky 区画の中で、--p に合わせて 200vh ぶん上へ送る。\n境目が円の中央を通るたびに、円と重なった部分だけが反転して見える。円は --p に合わせて 0.8 倍から 1.2 倍へ広がり、文字は円の外に置く。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 反転は円と重なった部分だけに起き、円の外の地色は変えない\n- 円の色は var(--ground) の 1 色だけで、区画ごとに変えない\n- 文字は円の外に置き、ブレンドが効かなくても読める\n- 動きを減らす設定では、区画の境目が円の中央に来た状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-blend-invert/demo.html", "en": "Blend invert — mix-blend-mode invert\n\nPlace a fixed 50vmin disc at the centre of the frame, coloured `var(--ground)` and overlaid with `mix-blend-mode: difference`.\nBeneath it, stack three zones of different ground colours (white, deep navy, blue) vertically. Inside a 300vh sticky section, move the zones upward by 200vh in step with --p.\nEach time a boundary crosses the centre of the disc, only the part of the zone under the disc inverts. The disc grows from 0.8× to 1.2× with --p, and the copy sits outside the disc.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- Inversion happens only where the disc overlaps; the ground outside it stays unchanged\n- The disc is one colour, var(--ground), and never changes per zone\n- Copy sits outside the disc so it stays readable even without blending\n- With reduced motion, a zone boundary stays centred on the disc\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-blend-invert/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-blend-invert/demo.html", "html": "\n\n\n\n\n43 ブレンド反転 — mix-blend-mode invert\n\n\n\n
\n
\n

43

\n

ブレンド反転

\n

mix-blend-mode invert

\n

重なった所だけ色が反転する

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。このあとの区画を、円がまたいで反転させます。

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

Zone 1

\n

見出しが入ります

\n

本文のダミーです。

\n
\n
\n
\n
\n

Zone 2

\n

見出しが入ります

\n

本文のダミーです。

\n
\n
\n
\n
\n

Zone 3

\n

見出しが入ります

\n

本文のダミーです。

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

Section 2

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