{
"id": "motion:motion-mask-reveal",
"slug": "motion-mask-reveal",
"kind": "motion",
"title": {
"ja": "マスクリビール",
"en": "Mask reveal"
},
"aiName": "Clip-path reveal",
"summary": {
"ja": "幕が開くように画像が出る",
"en": "Images open like a curtain as they enter the viewport"
},
"number": 5,
"group": "appear",
"techniques": [
"intersection-observer",
"clip-path",
"css-transition"
],
"rules": [
{
"ja": "切り抜くのは中の画像で、表示を見張る要素は切り抜かない（切り抜くと画面に入ったと判定されない）",
"en": "Clip the inner image, never the observed element itself — a fully clipped element is never reported as intersecting"
},
{
"ja": "画像は clip-path だけで開き、中身の拡大や移動をしない",
"en": "Open the image with clip-path only; no scaling or moving the content"
},
{
"ja": "一度開いたら、戻っても閉じない",
"en": "Once opened, stay open"
},
{
"ja": "動きを減らす設定では、最初から全部開いた状態で見せる",
"en": "With reduced motion, show every image fully open from the start"
}
],
"reproduction": {
"prompt": {
"ja": "マスクリビール — Clip-path reveal\n\n画面下に並んだ 4 枚の画像が、それぞれ幕が開くように現れる演出を作ってください。画像は画面の下端から 20% 入ったところで一度だけ表示します。1 枚目は左から右へ、2 枚目は右から左へ、3 枚目は下から上へ開きます。開き方は clip-path を inset(0 100% 0 0)、inset(0 0 0 100%)、inset(100% 0 0 0) から inset(0) へ 0.7 秒、cubic-bezier(.2, .7, .2, 1) で動かします。画像の中身は拡大も移動もさせず、動かすのは clip-path だけにしてください。CSS と IntersectionObserver だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 切り抜くのは中の画像で、表示を見張る要素は切り抜かない（切り抜くと画面に入ったと判定されない）\n- 画像は clip-path だけで開き、中身の拡大や移動をしない\n- 一度開いたら、戻っても閉じない\n- 動きを減らす設定では、最初から全部開いた状態で見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-mask-reveal/demo.html",
"en": "Mask reveal — Clip-path reveal\n\nBuild a scroll-triggered reveal where four images open like a curtain as they enter the viewport. Each image appears once, when 20% of it is inside the viewport's bottom edge. Image 1 opens from left to right, image 2 from right to left, and image 3 from bottom to top. Animate clip-path from inset(0 100% 0 0), inset(0 0 0 100%), or inset(100% 0 0 0) to inset(0) over 0.7 seconds with cubic-bezier(.2, .7, .2, 1). Do not scale or move the content inside the image; animate only clip-path. Implement it with CSS and IntersectionObserver only, without any library.\n\nDo not drop:\n- Clip the inner image, never the observed element itself — a fully clipped element is never reported as intersecting\n- Open the image with clip-path only; no scaling or moving the content\n- Once opened, stay open\n- With reduced motion, show every image fully open from the start\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-mask-reveal/demo.html"
},
"code": {
"url": "https://design-vault.pages.dev/designs/motion-mask-reveal/demo.html",
"html": "\n\n\n\n\n05 マスクリビール — Clip-path reveal\n\n\n\n\n