{ "id": "motion:motion-ink-bleed", "slug": "motion-ink-bleed", "kind": "motion", "title": { "ja": "滲み", "en": "Ink bleed" }, "aiName": "Ink bleed text reveal", "summary": { "ja": "にじんだ墨が輪郭を結んで文字になる", "en": "A blot of bled ink resolves into crisp letters" }, "number": 58, "group": "text-motion", "techniques": [ "css-filter", "svg", "scroll-progress" ], "rules": [ { "ja": "ぼかしが 0 になったらフィルターごと外し、通常の描画に戻す（JS が動かなくても文字が読め、細い字の縁も痩せない）", "en": "Remove the filter altogether once the blur reaches 0 so the text renders normally, reads without JavaScript and keeps its thin edges" }, { "ja": "色は変えず、透明度だけに段差をつける（色のリテラルを書かない）", "en": "Step only the alpha channel and never write colour literals" }, { "ja": "フィルターは 1 本を見出しと副題で共有する", "en": "Share one filter between the heading and the subtitle" }, { "ja": "動きを減らす設定ではフィルターを当てない", "en": "Never apply the filter under reduced motion" } ], "reproduction": { "prompt": { "ja": "滲み — Ink bleed text reveal\n\nにじんだ墨の塊が輪郭を結んで文字になる動きを作ってください。SVG の filter を 1 本定義し、feGaussianBlur（stdDeviation を動かす）の出力を feColorMatrix（values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9.5\"、透明度を 22 倍して 9.5 を引いて段差をつける）に通します。見出しと副題の CSS に filter: url(#…) を当て、340vh の pin 区画の進み 10% から 70% で、stdDeviation を 9 × (1 − e)^1.6（e は 0 から 1）で 9 から 0 へ戻します。ぼかしが大きいあいだは墨の塊が丸く滲み、小さくなるにつれて縁が文字の形に締まります。ぼかしが 0 になったらフィルターを外して通常の描画に戻すので、JavaScript が動かなくても読めます。動きを減らす設定ではフィルターを当てません。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- ぼかしが 0 になったらフィルターごと外し、通常の描画に戻す（JS が動かなくても文字が読め、細い字の縁も痩せない）\n- 色は変えず、透明度だけに段差をつける（色のリテラルを書かない）\n- フィルターは 1 本を見出しと副題で共有する\n- 動きを減らす設定ではフィルターを当てない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-ink-bleed/demo.html", "en": "Ink bleed — Ink bleed text reveal\n\nMake a blot of bled ink resolve into crisp letters. Define one SVG filter that passes feGaussianBlur (with an animated stdDeviation) through an feColorMatrix with values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9.5\", which multiplies alpha by 22 and subtracts 9.5 to create a hard step. Apply filter: url(#…) to the heading and its subtitle and, from 10% to 70% of a 340vh pinned section, move stdDeviation from 9 down to 0 as 9 × (1 − e)^1.6, with e running 0 to 1. While the blur is large the ink swells into round blots, and as it shrinks the edges tighten into the letterforms. Once the blur reaches 0 remove the filter so the text renders normally and reads even without JavaScript. With reduced motion never apply it. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Remove the filter altogether once the blur reaches 0 so the text renders normally, reads without JavaScript and keeps its thin edges\n- Step only the alpha channel and never write colour literals\n- Share one filter between the heading and the subtitle\n- Never apply the filter under reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-ink-bleed/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-ink-bleed/demo.html", "html": "\n\n\n\n\n58 滲み — Ink bleed text reveal\n\n\n\n

\n

\n

58

\n

滲み

\n

Ink bleed text reveal

\n

にじんだ墨が輪郭を結んで文字になる

\n

SCROLL ↓

\n

\n

\n\n

\n

\n

\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の文字が、にじんだ墨の滲みから輪郭を結んでいきます。

\n

\n

\n\n

\n

\n \n

墨がにじむ

\n

INK BLEED

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