{ "id": "motion:motion-blur-in", "slug": "motion-blur-in", "kind": "motion", "title": { "ja": "ブラーイン", "en": "Blur-in" }, "aiName": "Blur-in reveal", "summary": { "ja": "ぼかしからくっきり表示", "en": "Content comes into focus from a blur as it enters the viewport" }, "number": 6, "group": "appear", "techniques": [ "intersection-observer", "css-filter", "css-transition" ], "rules": [ { "ja": "一度くっきりしたら、戻ってもぼかさない", "en": "Once sharp, never blur again on scroll back" }, { "ja": "ぼかしと透明度だけを変え、位置やサイズは動かさない", "en": "Change only the blur and opacity; never move or resize the elements" }, { "ja": "動きを減らす設定では、ぼかしを使わず最初から表示する", "en": "With reduced motion, show the elements sharp from the start with no transition" } ], "reproduction": { "prompt": { "ja": "ブラーイン — Blur-in reveal\n\n画面に入ったカード 2 枚と画像 2 枚が、ぼけた状態からくっきり見える状態へ変わる演出を作ってください。各要素は画面の下端から 20% 入ったところで一度だけ動きます。初期状態は filter: blur(16px) と opacity: 0 で、完成状態は filter: none と opacity: 1 です。両方を 0.7 秒、cubic-bezier(.2, .7, .2, 1) で遷移させます。要素の位置は動かさず、ぼかしと透明度だけを変えてください。CSS と IntersectionObserver だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 一度くっきりしたら、戻ってもぼかさない\n- ぼかしと透明度だけを変え、位置やサイズは動かさない\n- 動きを減らす設定では、ぼかしを使わず最初から表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-blur-in/demo.html", "en": "Blur-in — Blur-in reveal\n\nBuild a scroll-triggered effect where two cards and two images go from blurred to sharp as they enter the viewport. Each element animates once, when 20% of it is inside the viewport's bottom edge. The start state is filter: blur(16px) with opacity: 0, and the end state is filter: none with opacity: 1. Transition both properties over 0.7 seconds with cubic-bezier(.2, .7, .2, 1). Do not move the elements; change only the blur and the opacity. Implement it with CSS and IntersectionObserver only, without any library.\n\nDo not drop:\n- Once sharp, never blur again on scroll back\n- Change only the blur and opacity; never move or resize the elements\n- With reduced motion, show the elements sharp from the start with no transition\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-blur-in/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-blur-in/demo.html", "html": "\n\n\n\n\n06 ブラーイン — Blur-in reveal\n\n\n\n
\n
\n

06

\n

ブラーイン

\n

Blur-in reveal

\n

ぼかしからくっきり表示

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。ぼかしが消えてから、くっきり表示されます。

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

Section 2

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