{
  "id": "motion:motion-vertical-write",
  "slug": "motion-vertical-write",
  "kind": "motion",
  "title": {
    "ja": "縦書きの筆記",
    "en": "Vertical writing"
  },
  "aiName": "Vertical writing reveal",
  "summary": {
    "ja": "縦書きの文が右の行から一字ずつ現れる",
    "en": "Vertical Japanese text is written onto manuscript paper, column by column from the right"
  },
  "number": 50,
  "group": "text-motion",
  "techniques": [
    "css-transition",
    "scroll-progress"
  ],
  "rules": [
    {
      "ja": "flex の向きに注意。縦書きの箱では row が上から下になるので、行を右から左へ並べるときは block のまま積む",
      "en": "In a vertical writing box flex row runs top to bottom, so stack the lines as blocks to get right-to-left columns"
    },
    {
      "ja": "罫線のマスと字の送りを同じ長さ（--cell）にそろえ、箱に余白（padding）を付けない",
      "en": "Use one --cell for both grid lines and character advance, and no padding on the box"
    },
    {
      "ja": "字は先頭から数えた順に現れ、戻せば後ろから消える",
      "en": "Characters appear in reading order and disappear from the end on scroll-back"
    },
    {
      "ja": "本物の文は aria-label に残し、動きを減らす設定では全字を表示する",
      "en": "Keep the real text in aria-label, and show every character with reduced motion"
    }
  ],
  "reproduction": {
    "prompt": {
      "ja": "縦書きの筆記 — Vertical writing reveal\n\n縦書きの短い詩を、原稿用紙の上へ一字ずつ書き込む動きを作ってください。writing-mode: vertical-rl の箱に 3 行（右の行から読む）を置き、1 行は 9 マスぶんの高さにします。マスの大きさは clamp(30px, 6.2vw, 56px) で、罫線は linear-gradient を 2 本重ねて同じ長さごとに引き、字は枠の 72% の大きさにします。380vh の pin 区画の進み 0〜85% で、右の行の上から下、次は左の行へと、字の順に 1 字ずつ現れます。現れる字は上から 0.35em ずれ、ぼかし 4px・透明からくっきり戻り（0.5 秒）、いま書いた最後の字だけアクセント色にします。下に「17 / 25」のような書いた字数を出します。本物の文は各行の aria-label に残し、動きを減らす設定では全字を書き終えた状態で見せます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- flex の向きに注意。縦書きの箱では row が上から下になるので、行を右から左へ並べるときは block のまま積む\n- 罫線のマスと字の送りを同じ長さ（--cell）にそろえ、箱に余白（padding）を付けない\n- 字は先頭から数えた順に現れ、戻せば後ろから消える\n- 本物の文は aria-label に残し、動きを減らす設定では全字を表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-vertical-write/demo.html",
      "en": "Vertical writing — Vertical writing reveal\n\nWrite a short vertical Japanese poem onto manuscript paper one character at a time. Put three lines in a writing-mode: vertical-rl box, read from the rightmost, each nine cells tall. Size a cell with clamp(30px, 6.2vw, 56px), draw the grid by stacking two linear-gradients at the cell length, and set each character at 72% of the cell. In a 380vh pinned section, over 0–85% progress, reveal one character at a time, top to bottom in the right-hand line and then the next line to the left. A revealing character starts 0.35em above, blurred by 4px and transparent, and settles over 0.5 seconds; only the most recently written character is accent-coloured. Show the written count below, such as \"17 / 25\". Keep the real text in each line’s aria-label, and with reduced motion show every character already written. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- In a vertical writing box flex row runs top to bottom, so stack the lines as blocks to get right-to-left columns\n- Use one --cell for both grid lines and character advance, and no padding on the box\n- Characters appear in reading order and disappear from the end on scroll-back\n- Keep the real text in aria-label, and show every character with reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-vertical-write/demo.html"
    },
    "code": {
      "url": "https://design-vault.pages.dev/designs/motion-vertical-write/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>50 縦書きの筆記 — Vertical writing 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.stack { display: grid; gap: var(--s6); }\n.vw-zone { height: 380vh; }\n.vw-stick { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }\n/* 原稿用紙の升目。行の幅と字の送りを同じ長さに揃えて、罫線が字の位置に合うようにする。 */\n.vw-sheet {\n  --cell: clamp(30px, 6.2vw, 56px);\n  writing-mode: vertical-rl;\n  display: block;\n  width: max-content;\n  margin-inline: auto;\n  padding: 0;\n  border: 1px solid var(--rule);\n  border-radius: var(--radius);\n  background:\n    linear-gradient(to bottom, var(--rule) 1px, transparent 1px) 0 0 / 100% var(--cell),\n    linear-gradient(to left, var(--rule) 1px, transparent 1px) 0 0 / var(--cell) 100%;\n  background-color: var(--surface);\n  font-size: calc(var(--cell) * .72);\n  font-weight: 700;\n  line-height: var(--cell);\n  letter-spacing: calc(var(--cell) * .28);\n  max-width: 100%;\n}\n.vw-col { margin: 0; height: calc(var(--cell) * 9); width: var(--cell); text-align: center; white-space: nowrap; }\n.vw-ch { display: inline-block; }\n.js .vw-ch { opacity: 0; transform: translateY(-.35em); filter: blur(4px); transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease); }\n.js .vw-ch.is-on { opacity: 1; transform: none; filter: none; }\n.vw-ch.is-head { color: var(--accent); }\n.vw-count { margin-top: var(--s3); text-align: center; font-family: var(--mono); font-size: var(--t-label); color: var(--muted); letter-spacing: .12em; }\n\n@media (prefers-reduced-motion: reduce) {\n  .vw-zone { height: auto; }\n  .vw-stick { position: static; height: auto; padding-block: var(--s6); }\n  .js .vw-ch { opacity: 1; transform: none; filter: none; transition: none; }\n}\n</style>\n</head>\n<body data-motion-number=\"50\">\n<header class=\"dv-label\">\n  <div class=\"dv-wrap\">\n    <p class=\"dv-num\">50</p>\n    <h1 class=\"dv-name\">縦書きの筆記</h1>\n    <p class=\"dv-ai\">Vertical writing 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=\"dv-wrap stack\">\n    <section class=\"dv-card\">\n      <p class=\"dv-eyebrow\">Section 1</p>\n      <h2 class=\"dv-h2\">見出しが入ります</h2>\n      <p class=\"dv-lead\">本文のダミーです。スクロールすると、下の原稿用紙に縦書きの文が右の行から書き込まれます。</p>\n    </section>\n  </div>\n\n  <section class=\"vw-zone\" data-progress=\"pin\">\n    <div class=\"vw-stick\">\n      <div>\n        <div class=\"vw-sheet\" lang=\"ja\">\n          <p class=\"vw-col\">静かな朝の窓辺に</p>\n          <p class=\"vw-col\">言葉は上から下へ</p>\n          <p class=\"vw-col\">右から左へと流れる</p>\n        </div>\n        <p class=\"vw-count\">25 / 25</p>\n      </div>\n    </div>\n  </section>\n\n  <div class=\"dv-wrap stack\">\n    <section class=\"dv-card\">\n      <p class=\"dv-eyebrow\">Section 2</p>\n      <h2 class=\"dv-h2\">見出しが入ります</h2>\n      <p class=\"dv-lead\">本文のダミーです。書き終えた文は、そのまま残ります。</p>\n    </section>\n  </div>\n</main>\n\n<footer class=\"dv-end\">END — 50 縦書きの筆記</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 cols = [...document.querySelectorAll('.vw-col')];\nconst countEl = document.querySelector('.vw-count');\n// 1 字ずつ <span> に割る。行の順（右→左）と字の順（上→下）が、そのまま書く順になる。\nconst chars = [];\nfor (const col of cols) {\n  const text = col.textContent;\n  col.setAttribute('role', 'img');\n  col.setAttribute('aria-label', text);\n  col.textContent = '';\n  for (const ch of text) {\n    const s = document.createElement('span');\n    s.className = 'vw-ch';\n    s.setAttribute('aria-hidden', 'true');\n    s.textContent = ch;\n    col.append(s);\n    chars.push(s);\n  }\n}\nconst set = (n) => {\n  chars.forEach((c, i) => {\n    c.classList.toggle('is-on', i < n);\n    c.classList.toggle('is-head', i === n - 1 && n < chars.length);\n  });\n  countEl.textContent = `${n} / ${chars.length}`;\n};\nif (dvReduce) set(chars.length);\nelse dvProgress((el, p) => set(Math.round(Math.min(1, p / 0.85) * chars.length)));\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-vertical-write",
    "en": "https://design-vault.pages.dev/en/designs/motion-vertical-write",
    "json": "https://design-vault.pages.dev/ai/assets/motion-vertical-write.json",
    "designJson": null
  }
}