{ "id": "motion:motion-word-swapper", "slug": "motion-word-swapper", "kind": "motion", "title": { "ja": "ワードスワッパー", "en": "Rotating word swapper" }, "aiName": "Rotating word swapper", "summary": { "ja": "一語が縦に入れ替わっていく", "en": "One word in a sentence rolls vertically to the next" }, "number": 28, "group": "text-motion", "techniques": [ "position-sticky", "scroll-progress", "css-transition" ], "rules": [ { "ja": "枠の高さと語 1 つの高さを、行の高さ（1.3em）に揃える（ずれると前後の語がのぞく）", "en": "Keep the frame and each word exactly one line tall (1.3em); any mismatch lets the neighbouring words show" }, { "ja": "枠の幅は 4 語のうち最も長い語に合わせて固定する（語ごとに幅を変えると後ろの文が左右に動く）", "en": "Size the frame to the widest of the four words and keep it fixed; resizing it per word shifts the text after it" }, { "ja": "語の番号は進み具合 p から決め、時間では切り替えない", "en": "Choose the word from scroll progress p, never from a timer" }, { "ja": "動きを減らす設定では固定を解除し、4 語目が入った完成した文を止めて見せる", "en": "Under prefers-reduced-motion, release the pin and show the finished sentence with the fourth word, static" } ], "reproduction": { "prompt": { "ja": "ワードスワッパー — Rotating word swapper\n\n一文の中の一語だけが、スクロールに応じて縦に入れ替わる演出を作ってください。外側の区画は高さ 300vh とし、その中に position: sticky; top: 0 の 100vh の箱を置いて、大きな一文（40〜72px、行の高さ 1.3）を中央に固定します。入れ替わる語は高さ 1.3em・overflow: hidden の枠に入れ、枠の中に 4 語を縦に並べます。区画の上端が画面の上端に来たとき p=0、区画の下端が画面の下端に来たとき p=1 として進み具合 p（0〜1）を求め、k = floor(p × 4)（最大 3）の番号ぶん、語の列を translateY(k × -1.3em) で上へ送ります。送りは 0.7 秒の transform の transition で行い、枠の外の文は動かしません。CSS と素の JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 枠の高さと語 1 つの高さを、行の高さ（1.3em）に揃える（ずれると前後の語がのぞく）\n- 枠の幅は 4 語のうち最も長い語に合わせて固定する（語ごとに幅を変えると後ろの文が左右に動く）\n- 語の番号は進み具合 p から決め、時間では切り替えない\n- 動きを減らす設定では固定を解除し、4 語目が入った完成した文を止めて見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-word-swapper/demo.html", "en": "Rotating word swapper — Rotating word swapper\n\nBuild an effect where a single word inside a sentence rolls vertically to the next as the page scrolls. The outer section is 300vh tall and holds a 100vh box with position: sticky; top: 0 that keeps one large sentence (40–72px, line-height 1.3) centred on screen. Put the changing word in a frame 1.3em tall with overflow: hidden, and stack four words vertically inside it. Compute the progress p (0 to 1) as p=0 when the section's top reaches the top of the screen and p=1 when its bottom reaches the bottom, then move the word column up by k = floor(p × 4) lines (3 at most) with translateY(k × -1.3em). Animate that move with a 0.7-second transform transition, and leave the rest of the sentence still. Implement it with plain CSS and JavaScript only, with no library.\n\nDo not drop:\n- Keep the frame and each word exactly one line tall (1.3em); any mismatch lets the neighbouring words show\n- Size the frame to the widest of the four words and keep it fixed; resizing it per word shifts the text after it\n- Choose the word from scroll progress p, never from a timer\n- Under prefers-reduced-motion, release the pin and show the finished sentence with the fourth word, static\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-word-swapper/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-word-swapper/demo.html", "html": "\n\n\n\n\n28 ワードスワッパー — Rotating word swapper\n\n\n\n

\n

\n

28

\n

ワードスワッパー

\n

Rotating word swapper

\n

一語が縦に入れ替わっていく

\n

SCROLL ↓

\n

\n

\n\n

\n

\n

\n

\n

Word swapper

\n

\n 毎日の資料提案報告企画づくりを、もっと速く。\n

\n

本文のダミーです。文は動かず、枠の中の一語だけが入れ替わります。

\n

\n

01 / 04

\n

\n \n \n \n \n

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