{
  "id": "motion:motion-curtain-reveal",
  "slug": "motion-curtain-reveal",
  "kind": "motion",
  "title": {
    "ja": "カーテンリビール",
    "en": "Curtain reveal"
  },
  "aiName": "Curtain section reveal",
  "summary": {
    "ja": "前の画面が持ち上がり次が現れる",
    "en": "The previous screen lifts away to reveal the next one beneath"
  },
  "number": 37,
  "group": "lp-section",
  "techniques": [
    "position-sticky",
    "scroll-progress"
  ],
  "rules": [
    {
      "ja": "区画は 100vh、外側の区画は 300vh を保つ（区画の高さを変えると持ち上がる区切りがずれる）",
      "en": "Keep each section at 100vh inside a 300vh wrapper; changing the heights moves the lift boundaries"
    },
    {
      "ja": "先の区画ほど手前に出す（z-index を後ろほど小さく）。逆にすると次の区画が前に出て、持ち上がって見えない",
      "en": "Earlier sections sit in front (smaller z-index further down); reversing that brings the next section forward and the lift disappears"
    },
    {
      "ja": "持ち上がりは進み具合 p から決め、時間では動かさない",
      "en": "The lift follows scroll progress p, never a timer"
    },
    {
      "ja": "動きを減らす設定では区画を縦に並べ、持ち上がりを止める",
      "en": "Under prefers-reduced-motion, stack the sections in flow and stop the lift"
    }
  ],
  "reproduction": {
    "prompt": {
      "ja": "カーテンリビール — Curtain section reveal\n\n全画面の区画を 3 つ、同じ位置に重ねて表示する演出を作ってください。区画はそれぞれ position: sticky; top: 0 の 100vh の箱で、z-index は後ろの区画ほど小さくします。区画を包む外側の区画は高さ 300vh とします。外側の進み具合 p（0〜1）を求め、1 つ目の区画は p が 0〜0.5 の間に上へ 100vh 持ち上がり、2 つ目の区画は p が 0.5〜1 の間に同じく持ち上がります。持ち上がる区画には影を落とし、同時に 4% ほど縮めます。その下から次の区画が現れます。CSS と素の JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 区画は 100vh、外側の区画は 300vh を保つ（区画の高さを変えると持ち上がる区切りがずれる）\n- 先の区画ほど手前に出す（z-index を後ろほど小さく）。逆にすると次の区画が前に出て、持ち上がって見えない\n- 持ち上がりは進み具合 p から決め、時間では動かさない\n- 動きを減らす設定では区画を縦に並べ、持ち上がりを止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-curtain-reveal/demo.html",
      "en": "Curtain reveal — Curtain section reveal\n\nBuild an effect of three full-screen sections stacked in the same place. Each section is a 100vh box with position: sticky; top: 0, and the z-index is smaller for each section further down. Wrap them in an outer section 300vh tall. Compute the outer progress p (0 to 1). The first section lifts 100vh upward while p goes from 0 to 0.5, and the second lifts the same way while p goes from 0.5 to 1, so the next section appears beneath it. The lifting section casts a shadow and shrinks by about 4%. Implement it with plain CSS and JavaScript only, with no library.\n\nDo not drop:\n- Keep each section at 100vh inside a 300vh wrapper; changing the heights moves the lift boundaries\n- Earlier sections sit in front (smaller z-index further down); reversing that brings the next section forward and the lift disappears\n- The lift follows scroll progress p, never a timer\n- Under prefers-reduced-motion, stack the sections in flow and stop the lift\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-curtain-reveal/demo.html"
    },
    "code": {
      "url": "https://design-vault.pages.dev/designs/motion-curtain-reveal/demo.html",
      "html": "<!doctype html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>37 カーテンリビール — Curtain section reveal</title>\n<style>\n/* dv-motion-base:start */\n:root {\n  --ground: #FFFFFF;\n  --surface: #F3F5F8;\n  --ink: #14181F;\n  --muted: #5A6472;\n  --accent: #1F5FA8;\n  --rule: #D8DDE4;\n  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--ground));\n  --accent-mid: color-mix(in srgb, var(--accent) 45%, var(--ground));\n  --shade: color-mix(in srgb, var(--ink) 14%, transparent);\n\n  --font: \"Zen Kaku Gothic New\", \"Hiragino Sans\", \"Noto Sans JP\", \"Yu Gothic\", system-ui, sans-serif;\n  --mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n\n  --t-label: 13px;\n  --t-body: 16px;\n  --t-lead: 20px;\n  --t-h2: 32px;\n  --t-h1: clamp(40px, 7vw, 72px);\n\n  --s1: 4px;\n  --s2: 8px;\n  --s3: 16px;\n  --s4: 24px;\n  --s5: 40px;\n  --s6: 64px;\n  --s7: 104px;\n\n  --radius: 12px;\n  --ease: cubic-bezier(.2, .7, .2, 1);\n  --dur: .7s;\n  --measure: 1080px;\n}\n*, *::before, *::after { box-sizing: border-box; }\nhtml { -webkit-text-size-adjust: 100%; }\nbody {\n  margin: 0;\n  background: var(--ground);\n  color: var(--ink);\n  font-family: var(--font);\n  font-size: var(--t-body);\n  line-height: 1.7;\n  font-feature-settings: \"palt\";\n  overflow-x: hidden;\n}\nh1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }\nul, ol { list-style: none; }\n.dv-wrap { width: min(100% - 2 * var(--s4), var(--measure)); margin-inline: auto; }\n.dv-label {\n  min-height: 72vh;\n  display: grid;\n  align-content: center;\n  gap: var(--s3);\n  padding-block: var(--s6);\n  border-bottom: 1px solid var(--rule);\n}\n.dv-num { font-family: var(--mono); font-size: var(--t-lead); font-weight: 700; color: var(--accent); letter-spacing: .04em; }\n.dv-name { font-size: var(--t-h1); font-weight: 700; line-height: 1.15; letter-spacing: .01em; }\n.dv-ai { font-family: var(--mono); font-size: var(--t-lead); color: var(--muted); }\n.dv-desc { font-size: var(--t-lead); color: var(--ink); }\n.dv-hint { font-size: var(--t-label); color: var(--muted); letter-spacing: .12em; margin-top: var(--s4); }\n.dv-stage { padding-block: var(--s7); }\n.dv-h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.3; }\n.dv-lead { font-size: var(--t-lead); color: var(--muted); }\n.dv-eyebrow { font-family: var(--mono); font-size: var(--t-label); color: var(--accent); letter-spacing: .12em; text-transform: uppercase; }\n.dv-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s4); }\n.dv-ph {\n  border-radius: var(--radius);\n  background: linear-gradient(135deg, var(--accent-soft), var(--accent-mid) 60%, var(--accent));\n  aspect-ratio: 16 / 9;\n}\n.dv-ph--alt { background: linear-gradient(200deg, var(--surface), var(--accent-soft) 55%, var(--accent-mid)); }\n.dv-ph--ink { background: linear-gradient(160deg, var(--ink), color-mix(in srgb, var(--ink) 55%, var(--accent))); }\n.dv-end {\n  min-height: 60vh;\n  display: grid;\n  place-items: center;\n  border-top: 1px solid var(--rule);\n  color: var(--muted);\n  font-family: var(--mono);\n  font-size: var(--t-label);\n  letter-spacing: .12em;\n}\n/* dv-motion-base:end */\n\n/* ---- この演出だけの CSS。色は var(--…) か color-mix() のみ ---- */\n.curtain-zone { position: relative; }\n.curtain-sec {\n  position: relative;\n  height: 100vh;\n  display: grid;\n  align-content: center;\n  padding-inline: var(--s3);\n  background: var(--ground);\n}\n.curtain-sec:nth-child(1) { background: var(--surface); }\n.curtain-sec:nth-child(2) { background: var(--accent-soft); }\n.curtain-sec .dv-wrap { display: grid; gap: var(--s3); }\n.curtain-sec .dv-ph { aspect-ratio: auto; height: min(28vh, 240px); }\n\n/* 3 つの区画を同じ位置に重ね、先の区画ほど手前に出す。JS が無いときは縦に並べる。 */\n.js .curtain-zone { height: 300vh; }\n.js .curtain-sec {\n  position: sticky;\n  top: 0;\n  transform: translate3d(0, calc(var(--q, 0) * -100%), 0) scale(calc(1 - var(--q, 0) * .04));\n  transform-origin: 50% 0;\n  /* 影は持ち上がっている途中だけ濃く、切れたら消す（--arc は 0→1→0） */\n  --arc: calc(var(--q, 0) * (1 - var(--q, 0)) * 4);\n  box-shadow: 0 calc(var(--arc) * 32px) calc(var(--arc) * 64px) var(--shade);\n  will-change: transform;\n}\n.js .curtain-sec + .curtain-sec { margin-top: -100vh; }\n.js .curtain-sec:nth-child(1) { z-index: 3; }\n.js .curtain-sec:nth-child(2) { z-index: 2; }\n.js .curtain-sec:nth-child(3) { z-index: 1; }\n\n@media (prefers-reduced-motion: reduce) {\n  .js .curtain-zone { height: auto; }\n  .js .curtain-sec:nth-child(n) { position: relative; height: auto; padding-block: var(--s7); transform: none; box-shadow: none; margin-top: 0; z-index: auto; }\n}\n</style>\n</head>\n<body data-motion-number=\"37\">\n<header class=\"dv-label\">\n  <div class=\"dv-wrap\">\n    <p class=\"dv-num\">37</p>\n    <h1 class=\"dv-name\">カーテンリビール</h1>\n    <p class=\"dv-ai\">Curtain section reveal</p>\n    <p class=\"dv-desc\">前の画面が持ち上がり次が現れる</p>\n    <p class=\"dv-hint\">SCROLL ↓</p>\n  </div>\n</header>\n\n<main class=\"dv-stage\">\n  <div class=\"curtain-zone\" data-progress=\"pin\">\n    <section class=\"curtain-sec\">\n      <div class=\"dv-wrap\">\n        <p class=\"dv-eyebrow\">Section 01</p>\n        <h2 class=\"dv-h2\">見出しが入ります</h2>\n        <p class=\"dv-lead\">本文のダミーです。この画面が持ち上がると、次の画面が現れます。</p>\n        <div class=\"dv-ph\"></div>\n      </div>\n    </section>\n    <section class=\"curtain-sec\">\n      <div class=\"dv-wrap\">\n        <p class=\"dv-eyebrow\">Section 02</p>\n        <h2 class=\"dv-h2\">見出しが入ります</h2>\n        <p class=\"dv-lead\">本文のダミーです。持ち上がった画面の下から、次の区画が見えてきます。</p>\n        <div class=\"dv-ph dv-ph--alt\"></div>\n      </div>\n    </section>\n    <section class=\"curtain-sec\">\n      <div class=\"dv-wrap\">\n        <p class=\"dv-eyebrow\">Section 03</p>\n        <h2 class=\"dv-h2\">見出しが入ります</h2>\n        <p class=\"dv-lead\">本文のダミーです。最後の区画は、そのまま残ります。</p>\n        <div class=\"dv-ph dv-ph--ink\"></div>\n      </div>\n    </section>\n  </div>\n</main>\n\n<footer class=\"dv-end\">END — 37 カーテンリビール</footer>\n\n<script>\n/* dv-motion-helpers:start */\nconst dvReduce = matchMedia('(prefers-reduced-motion: reduce)').matches;\ndocument.documentElement.classList.add('js');\n\n/**\n * 画面に入った要素へ .is-in を付ける。\n * data-reveal=\"repeat\" の要素は画面を出たら外す（何度でも再生）。\n */\nfunction dvReveal(selector = '[data-reveal]', { threshold = 0.2, rootMargin = '0px 0px -8% 0px' } = {}) {\n  const els = [...document.querySelectorAll(selector)];\n  if (dvReduce || !('IntersectionObserver' in window)) {\n    els.forEach((el) => el.classList.add('is-in'));\n    return;\n  }\n  const io = new IntersectionObserver((entries) => {\n    for (const e of entries) {\n      if (e.isIntersecting) {\n        e.target.classList.add('is-in');\n        if (e.target.dataset.reveal !== 'repeat') io.unobserve(e.target);\n      } else if (e.target.dataset.reveal === 'repeat') {\n        e.target.classList.remove('is-in');\n      }\n    }\n  }, { threshold, rootMargin });\n  els.forEach((el) => io.observe(el));\n}\n\n/**\n * スクロール量を 0〜1 にして、各 [data-progress] 要素の CSS 変数 --p に書く。\n *   data-progress=\"through\" : 要素の上端が画面の下端に来たとき 0、下端が画面の上端を抜けたとき 1\n *   data-progress=\"pin\"     : 要素の上端が画面の上端に来たとき 0、下端が画面の下端に来たとき 1\n *                             （中に position: sticky の箱を持つ、背の高い区画用）\n *   data-progress=\"page\"    : ページ全体のスクロール量\n * onUpdate(el, p) を渡すと、値が変わるたびに呼ばれる。\n */\nfunction dvProgress(onUpdate) {\n  const els = [...document.querySelectorAll('[data-progress]')];\n  const clamp = (n) => Math.min(1, Math.max(0, n));\n  let queued = false;\n  const measure = () => {\n    queued = false;\n    const vh = window.innerHeight;\n    for (const el of els) {\n      const r = el.getBoundingClientRect();\n      let p;\n      if (el.dataset.progress === 'pin') p = r.height > vh ? -r.top / (r.height - vh) : 0;\n      else if (el.dataset.progress === 'page') {\n        const max = document.documentElement.scrollHeight - vh;\n        p = max > 0 ? window.scrollY / max : 0;\n      } else p = (vh - r.top) / (vh + r.height);\n      p = clamp(p);\n      el.style.setProperty('--p', p.toFixed(4));\n      if (onUpdate) onUpdate(el, p);\n    }\n  };\n  const request = () => {\n    if (!queued) { queued = true; requestAnimationFrame(measure); }\n  };\n  addEventListener('scroll', request, { passive: true });\n  addEventListener('resize', request);\n  measure();\n}\n/* dv-motion-helpers:end */\n\n/* ---- この演出だけの JS ---- */\nconst curtainSecs = [...document.querySelectorAll('.curtain-sec')];\n// 区画 1 は p の前半、区画 2 は後半で持ち上がる。区画 3 は最後まで残る。\ndvProgress((el, p) => {\n  curtainSecs.slice(0, -1).forEach((s, k) => {\n    const q = Math.min(1, Math.max(0, p * 2 - k));\n    s.style.setProperty('--q', q.toFixed(4));\n  });\n});\n</script>\n</body>\n</html>\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-curtain-reveal",
    "en": "https://design-vault.pages.dev/en/designs/motion-curtain-reveal",
    "json": "https://design-vault.pages.dev/ai/assets/motion-curtain-reveal.json",
    "designJson": null
  }
}