{ "id": "motion:motion-fade-in", "slug": "motion-fade-in", "kind": "motion", "title": { "ja": "フェードイン", "en": "Fade-in" }, "aiName": "Scroll-triggered fade-in", "summary": { "ja": "画面に入ったらふわっと表示", "en": "Elements fade in softly as they enter the viewport" }, "number": 1, "group": "appear", "techniques": [ "intersection-observer", "css-transition" ], "rules": [ { "ja": "一度表示したら、戻っても消さない", "en": "Once revealed, stay revealed" }, { "ja": "移動は 24px 以内に抑え、必ず透明度と組み合わせる", "en": "Keep the travel within 24px and always pair it with opacity" }, { "ja": "動きを減らす設定では、完成した状態を動かさずに見せる", "en": "With reduced motion on, show the finished state without animation" } ], "reproduction": { "prompt": { "ja": "フェードイン — Scroll-triggered fade-in\n\n画面に入った要素を、透明度 0 → 1 と、下から 24px の位置（translateY(24px) → 0）からの移動で表示する。\n要素の上端が画面下端から 8% 上に入ったとき（threshold 0.2）に一度だけ再生し、長さは 0.7 秒、イージングは cubic-bezier(.2, .7, .2, 1) にする。\n見出しのカードと画像の 2 つを縦に並べ、スクロールのたびに同じ動きが一度ずつ見えるようにする。\n動きを減らす設定（prefers-reduced-motion: reduce）では、最初から完成した状態で表示する。\nCSS と IntersectionObserver だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 一度表示したら、戻っても消さない\n- 移動は 24px 以内に抑え、必ず透明度と組み合わせる\n- 動きを減らす設定では、完成した状態を動かさずに見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-fade-in/demo.html", "en": "Fade-in — Scroll-triggered fade-in\n\nFade each element in as it enters the viewport: opacity 0 → 1 while it moves from translateY(24px) to 0.\nPlay once, when the element's top edge crosses 8% above the bottom of the screen (threshold 0.2), over 0.7 seconds with cubic-bezier(.2, .7, .2, 1).\nStack a heading card and an image vertically so each one reveals on its own as you scroll.\nWith prefers-reduced-motion: reduce, show the finished state from the start.\nImplement with CSS and IntersectionObserver only, no library.\n\nDo not drop:\n- Once revealed, stay revealed\n- Keep the travel within 24px and always pair it with opacity\n- With reduced motion on, show the finished state without animation\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-fade-in/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-fade-in/demo.html", "html": "\n\n\n\n\n01 フェードイン — Scroll-triggered fade-in\n\n\n\n
\n
\n

01

\n

フェードイン

\n

Scroll-triggered fade-in

\n

画面に入ったらふわっと表示

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。画面に入った時点で一度だけ表示されます。

\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。画面に入った時点で一度だけ表示されます。

\n
\n
\n
\n

Section 3

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