{ "id": "motion:motion-iris-mask", "slug": "motion-iris-mask", "kind": "motion", "title": { "ja": "アイリスマスク", "en": "Iris mask" }, "aiName": "Circular iris mask expand", "summary": { "ja": "円形に開いて次の画面が出る", "en": "A circle opens from the centre to reveal the next screen" }, "number": 34, "group": "media-depth", "techniques": [ "position-sticky", "clip-path", "scroll-progress" ], "rules": [ { "ja": "上の面だけを円で切り、下の面（今の画面）は動かさない", "en": "Clip only the upper face with the circle; the face beneath stays still" }, { "ja": "円の半径は進み具合 p から決め、時間では広げない", "en": "Derive the circle radius from scroll progress p, never from a timer" }, { "ja": "動きを減らす設定では円を使わず、次の画面だけを表示する", "en": "Under prefers-reduced-motion, drop the circle and show only the next screen" } ], "reproduction": { "prompt": { "ja": "アイリスマスク — Circular iris mask expand\n\n画面を固定し、今の画面の上に次の画面を重ね、中央の一点から円形に開いて次の画面を見せる演出を作ってください。外側の区画は高さ 400vh とし、その中に position: sticky; top: 0 の 100vh の箱を置きます。箱の中では今の画面（下の面）の上に次の画面（上の面）を重ね、上の面だけを clip-path: circle(calc(var(--p) * 75vmax) at 50% 50%) で切ります。区画の上端が画面の上端に来たとき p=0、区画の下端が画面の下端に来たとき p=1 として進み具合 p（0〜1）を求めます。中心には直径 12px の点を置いて円の起点を示し、375px 幅でも両方の面が箱の中に収まって横スクロールが出ないようにします。CSS と素の JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 上の面だけを円で切り、下の面（今の画面）は動かさない\n- 円の半径は進み具合 p から決め、時間では広げない\n- 動きを減らす設定では円を使わず、次の画面だけを表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-iris-mask/demo.html", "en": "Iris mask — Circular iris mask expand\n\nBuild an effect that pins the screen and opens the next screen as a circle from one point at the centre, laid over the current screen. The outer section is 400vh tall and holds a 100vh box with position: sticky; top: 0. Inside the box, place the next screen over the current one (the lower face), and clip only the upper face with clip-path: circle(calc(var(--p) * 75vmax) at 50% 50%). Compute the progress p (0 to 1) as p=0 when the section's top reaches the top of the screen and p=1 when its bottom reaches the bottom. Put a 12px dot at the centre to mark where the circle starts, and keep both faces inside the box at 375px width so nothing scrolls sideways. Implement it with plain CSS and JavaScript only, with no library.\n\nDo not drop:\n- Clip only the upper face with the circle; the face beneath stays still\n- Derive the circle radius from scroll progress p, never from a timer\n- Under prefers-reduced-motion, drop the circle and show only the next screen\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-iris-mask/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-iris-mask/demo.html", "html": "\n\n\n\n\n34 アイリスマスク — Circular iris mask expand\n\n\n\n

アイリスマスク

Circular iris mask expand

円形に開いて次の画面が出る

SCROLL ↓

\n\n

Current

見出しが入ります

本文のダミーです。中心の点から円が広がります。

次の画面の見出し

本文のダミーです。開き切ると、次の画面だけが残ります。

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