{ "id": "motion:motion-tracking-expand", "slug": "motion-tracking-expand", "kind": "motion", "title": { "ja": "字間の開閉", "en": "Letter-spacing on scroll" }, "aiName": "Letter-spacing on scroll", "summary": { "ja": "字間がスクロールで広がり、また詰まる", "en": "Letter-spacing widens as you scroll, then tightens again" }, "number": 26, "group": "text-motion", "techniques": [ "scroll-progress" ], "rules": [ { "ja": "字間は -0.04em → 0.3em → 0 の順で、最大は区画が画面の中央に来たとき", "en": "Spacing runs -0.04em → 0.3em → 0, peaking when the section is centred in the viewport" }, { "ja": "字間が最大に広がっても（幅 340px 以上なら）見出しは 1 行に収まり、横スクロールを出さない", "en": "At the widest spacing the heading still fits on one line (from 340px wide up) and never causes horizontal scroll" }, { "ja": "見出しの箱の高さは固定し、スクロール中にページの高さを変えない", "en": "The heading box has a fixed height, so the page height never changes while scrolling" }, { "ja": "動きを減らす設定では字間 0 で止める", "en": "With reduced motion, spacing stays at 0" } ], "reproduction": { "prompt": { "ja": "字間の開閉 — Letter-spacing on scroll\n\n大見出し 3 本の字間が、スクロール量に合わせて開いて閉じる演出を作る。各見出しの区画が画面を通り抜ける進み具合を 0〜1 の値 --p で受け取り、そのうち 0.25〜0.75（区画が画面に入りきってから出始めるまで）を 0〜1 に引き伸ばして使う。\n`letter-spacing` は -0.04em から始まり、区画が画面の中央に来たとき 0.3em で最大になり、抜けるときに 0 へ戻る。値は時間ではなくスクロール量に直結させ、`transition` は付けない。\n見出しは `clamp(28px, 7vw, 96px)` の太字で 8 字以内にし、字間が最大（0.3em）に広がっても 1 行に収まって横スクロールを出さない。見出しの箱は 2 行ぶんの高さ（文字サイズ × 2.6）で固定し、下の要素が動かないようにする。\n動きを減らす設定では、字間を 0 にして止める。\nCSS の `calc()`・`min()`・`max()` と、スクロール量を CSS 変数へ書く素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 字間は -0.04em → 0.3em → 0 の順で、最大は区画が画面の中央に来たとき\n- 字間が最大に広がっても（幅 340px 以上なら）見出しは 1 行に収まり、横スクロールを出さない\n- 見出しの箱の高さは固定し、スクロール中にページの高さを変えない\n- 動きを減らす設定では字間 0 で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-tracking-expand/demo.html", "en": "Letter-spacing on scroll — Letter-spacing on scroll\n\nBuild three large headings whose letter-spacing opens and closes with scroll. Take each heading section's progress through the viewport as --p (0–1), and stretch the 0.25–0.75 part of it — from fully entered to starting to leave — to 0–1.\n`letter-spacing` starts at -0.04em, peaks at 0.3em when the section reaches the middle of the viewport, and returns to 0 as it leaves. Tie the value to scroll position, not time; do not add a `transition`.\nSet the headings bold at `clamp(28px, 7vw, 96px)`, eight characters or fewer, so they stay on one line at the widest spacing (0.3em) and no horizontal scrollbar appears. Fix each heading's box at two lines tall (font size × 2.6) so nothing below it moves.\nWith reduced motion, hold the letter-spacing at 0.\nImplement with CSS `calc()`, `min()` and `max()` plus plain JavaScript that writes scroll progress to a CSS variable; do not use a library.\n\nDo not drop:\n- Spacing runs -0.04em → 0.3em → 0, peaking when the section is centred in the viewport\n- At the widest spacing the heading still fits on one line (from 340px wide up) and never causes horizontal scroll\n- The heading box has a fixed height, so the page height never changes while scrolling\n- With reduced motion, spacing stays at 0\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-tracking-expand/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-tracking-expand/demo.html", "html": "\n\n\n\n\n26 字間の開閉 — Letter-spacing on scroll\n\n\n\n
\n
\n

26

\n

字間の開閉

\n

Letter-spacing on scroll

\n

字間がスクロールで広がり、また詰まる

\n

SCROLL ↓

\n
\n
\n\n
\n
\n
\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。このあとの大見出しは、画面の中央へ近づくほど字間が広がります。

\n
\n
\n
\n

Heading 1

\n

見出しが入ります

\n

letter-spacing: 0.00em

\n
\n
\n

Heading 2

\n

字間がひらきます

\n

letter-spacing: 0.00em

\n
\n
\n

Heading 3

\n

もとに戻ります

\n

letter-spacing: 0.00em

\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。中央を過ぎた見出しは、字間が詰まって通常の組みに戻ります。

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