{ "id": "motion:motion-char-wave", "slug": "motion-char-wave", "kind": "motion", "title": { "ja": "文字の波", "en": "Character wave" }, "aiName": "Character wave on scroll", "summary": { "ja": "波が文字の列を通り抜けていく", "en": "A wave passes through a row of characters, lifting each in turn" }, "number": 48, "group": "text-motion", "techniques": [ "scroll-progress" ], "rules": [ { "ja": "進みの両端では振れ幅を 0 に絞り、止まっているときは文字が一直線に揃う", "en": "Squeeze the amplitude to zero at both ends of progress so resting text is a straight line" }, { "ja": "字の位置は進みだけで決まる関数にする。戻せば波も戻る", "en": "Make positions a pure function of progress so the wave rewinds with the scroll" }, { "ja": "行を折り返さない。375px でも clamp で収める", "en": "Never wrap the line; fit it at 375px with clamp" }, { "ja": "本物の文は aria-label に残し、割った字は読み上げから外す", "en": "Keep the real text in aria-label and hide the split characters from screen readers" } ], "reproduction": { "prompt": { "ja": "文字の波 — Character wave on scroll\n\n一行の見出しと、その下の小さな英文を、スクロールに合わせて波が通り抜ける動きを作ってください。文を 1 字ずつ inline-block の要素に割り、360vh の pin 区画の進み p から、字 i の縦のずれを translateY(−sin(p × 2 × 2π − i/n × 2π × 1.1) × 0.32em × sin(πp)) で決めます（波は 2 回通り抜け、進みの両端では振れ幅 0 に絞る）。波の山にあたる字は 1.18 倍まで拡大し、sin が 0.8 を超えた字だけアクセント色にします。下の英文は逆向きの波にします。折り返さず、画面幅に合わせて文字の大きさを clamp で決めます。本物の文は aria-label に残し、動きを減らす設定では一直線のまま止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 進みの両端では振れ幅を 0 に絞り、止まっているときは文字が一直線に揃う\n- 字の位置は進みだけで決まる関数にする。戻せば波も戻る\n- 行を折り返さない。375px でも clamp で収める\n- 本物の文は aria-label に残し、割った字は読み上げから外す\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-char-wave/demo.html", "en": "Character wave — Character wave on scroll\n\nMake a wave pass through a one-line heading and a small English line below it as the page scrolls. Split each line into inline-block characters and, from progress p in a 360vh pinned section, set character i’s vertical offset to translateY(−sin(p × 2 × 2π − i/n × 2π × 1.1) × 0.32em × sin(πp)); the wave passes through twice and the amplitude is squeezed to zero at both ends of the progress. Scale crest characters up to 1.18× and turn only characters whose sine exceeds 0.8 accent-coloured. Run the English line’s wave in the opposite direction. Do not wrap, and size the type with clamp from the viewport width. Keep the real text in aria-label, and with reduced motion leave the characters in a straight line. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Squeeze the amplitude to zero at both ends of progress so resting text is a straight line\n- Make positions a pure function of progress so the wave rewinds with the scroll\n- Never wrap the line; fit it at 375px with clamp\n- Keep the real text in aria-label and hide the split characters from screen readers\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-char-wave/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-char-wave/demo.html", "html": "\n\n\n\n\n48 文字の波 — Character wave on scroll\n\n\n\n
\n
\n

48

\n

文字の波

\n

Character wave on scroll

\n

波が文字の列を通り抜けていく

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の文字の列を波が通り抜けます。

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

波のように言葉が揺れる

\n

The words sway like waves

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