{
  "id": "motion:motion-one-letter-big",
  "slug": "motion-one-letter-big",
  "kind": "motion",
  "title": {
    "ja": "一文字だけ大きく",
    "en": "One letter bigger"
  },
  "aiName": "One oversized letter in a title",
  "summary": {
    "ja": "一文字だけが大きく育ち、まわりが道を空ける",
    "en": "One letter of a title grows large while its neighbours make room"
  },
  "number": 57,
  "group": "text-motion",
  "techniques": [
    "scroll-progress"
  ],
  "rules": [
    {
      "ja": "幅は動かさない。まわりの字は translateX だけで左右へ退く",
      "en": "Never animate width; neighbours step aside with translateX only"
    },
    {
      "ja": "拡大の基点は字の下端中央。ほかの字と下端をそろえる",
      "en": "Anchor the scale at the bottom centre so baselines stay aligned"
    },
    {
      "ja": "大きくなる字の分、上に余白を取って、前の区画や文字に重ねない",
      "en": "Reserve headroom for the growing letter so it never overlaps what is above"
    },
    {
      "ja": "本物の見出しは aria-label に残し、動きを減らす設定では育った状態で止める",
      "en": "Keep the real heading in aria-label, and stop on the grown state under reduced motion"
    }
  ],
  "reproduction": {
    "prompt": {
      "ja": "一文字だけ大きく — One oversized letter in a title\n\n見出し「ひと文字だけ大きく」のうち「大」の一字だけを大きく育てる動きを作ってください。見出しを 1 字ずつ inline-block に割り、「大」だけアクセント色にして、transform-origin を 50% 100% に置いた scale で 1 から 2.4 倍まで easeInOut（t²(3 − 2t)）で育てます。幅は動かさず、左側の字は translateX(−(2.4 − 1) ÷ 2 × e em)、右側の字は translateX(+同じ量) で左右へ道を空けます（e は 0 から 1 の進み具合）。340vh の pin 区画の進み 12% から 72% を使い、字の下端を揃えるので大きくなった字は上へ伸びます。上へ伸びる分、見出しの上に 1.4em の余白を取ります。本物の見出しは aria-label に残し、動きを減らす設定では 2.4 倍に育った状態で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 幅は動かさない。まわりの字は translateX だけで左右へ退く\n- 拡大の基点は字の下端中央。ほかの字と下端をそろえる\n- 大きくなる字の分、上に余白を取って、前の区画や文字に重ねない\n- 本物の見出しは aria-label に残し、動きを減らす設定では育った状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-one-letter-big/demo.html",
      "en": "One letter bigger — One oversized letter in a title\n\nGrow only the 大 of the heading \"ひと文字だけ大きく\". Split the heading into inline-block characters, colour only 大 with the accent, and scale it from 1× to 2.4× with an ease-in-out, t²(3 − 2t), using transform-origin 50% 100%. Never animate width: shift each left neighbour by translateX(−(2.4 − 1) ÷ 2 × e em) and each right neighbour by the same amount in the other direction, where e runs from 0 to 1. Use 12% to 72% of a 340vh pinned section; the bottoms stay aligned so the big letter grows upward, so reserve 1.4em above the heading. Keep the real heading in aria-label, and with reduced motion stop at the full 2.4× state. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Never animate width; neighbours step aside with translateX only\n- Anchor the scale at the bottom centre so baselines stay aligned\n- Reserve headroom for the growing letter so it never overlaps what is above\n- Keep the real heading in aria-label, and stop on the grown state under reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-one-letter-big/demo.html"
    },
    "code": {
      "url": "https://design-vault.pages.dev/designs/motion-one-letter-big/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>57 一文字だけ大きく — One oversized letter in a title</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.ob-zone { height: 340vh; }\n.ob-stick { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; gap: var(--s4); overflow: clip; }\n@media (prefers-reduced-motion: reduce) {\n  .ob-zone { height: auto; }\n  .ob-stick { position: static; height: auto; padding-block: var(--s6); }\n}\n.ob-title { display: flex; justify-content: center; align-items: flex-end; font-size: clamp(30px, 7.6vw, 96px); font-weight: 700; line-height: 1.2; padding-top: 1.4em; }\n.ob-ch { display: inline-block; will-change: transform; }\n.ob-ch.is-big { color: var(--accent); transform-origin: 50% 100%; }\n.ob-cap { text-align: center; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; color: var(--muted); }\n</style>\n</head>\n<body data-motion-number=\"57\">\n<header class=\"dv-label\">\n  <div class=\"dv-wrap\">\n    <p class=\"dv-num\">57</p>\n    <h1 class=\"dv-name\">一文字だけ大きく</h1>\n    <p class=\"dv-ai\">One oversized letter in a title</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=\"ob-zone\" data-progress=\"pin\">\n    <div class=\"ob-stick\">\n      <h2 class=\"ob-title\" data-onebig=\"6\" aria-label=\"ひと文字だけ大きく\">ひと文字だけ大きく</h2>\n      <p class=\"ob-cap\">ONE LETTER, LARGER</p>\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 — 57 一文字だけ大きく</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 title = document.querySelector('[data-onebig]');\nconst bigIndex = Number(title.dataset.onebig);\nconst text = title.textContent;\ntitle.textContent = '';\nconst chars = [...text].map((ch, i) => {\n  const s = document.createElement('span');\n  s.className = 'ob-ch' + (i === bigIndex ? ' is-big' : '');\n  s.setAttribute('aria-hidden', 'true');\n  s.textContent = ch;\n  title.append(s);\n  return s;\n});\nconst SCALE = 2.4;\nconst easeInOut = (t) => t * t * (3 - 2 * t);\nfunction apply(e) {\n  const room = ((SCALE - 1) / 2) * e;   // 大きくなった分の半分（em）を、左右へ空ける\n  chars.forEach((c, i) => {\n    if (i === bigIndex) c.style.transform = `scale(${(1 + (SCALE - 1) * e).toFixed(3)})`;\n    else c.style.transform = `translateX(${((i < bigIndex ? -room : room)).toFixed(3)}em)`;\n  });\n}\nconst place = (p) => apply(easeInOut(Math.min(1, Math.max(0, (p - 0.12) / 0.6))));\nif (dvReduce) apply(1);   // 動きを減らす設定では、育った状態で止める\nelse dvProgress((el, p) => place(p));\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-one-letter-big",
    "en": "https://design-vault.pages.dev/en/designs/motion-one-letter-big",
    "json": "https://design-vault.pages.dev/ai/assets/motion-one-letter-big.json",
    "designJson": null
  }
}