{ "id": "motion:motion-letters-scatter", "slug": "motion-letters-scatter", "kind": "motion", "title": { "ja": "文字の集合", "en": "Letters scatter" }, "aiName": "Scattered letters snap into place", "summary": { "ja": "散らばった文字が回りながら整列する", "en": "Letters scattered in every direction spin back and line up" }, "number": 51, "group": "text-motion", "techniques": [ "scroll-progress", "css-3d" ], "rules": [ { "ja": "散った姿は固定の乱数で決め、戻したときに同じ位置へ散る", "en": "Fix each scattered pose from a seeded random so scrolling back scatters to the same places" }, { "ja": "舞台は overflow: clip にして、はみ出した字で横スクロールを出さない", "en": "Clip the stage with overflow: clip so flung characters never create a horizontal scrollbar" }, { "ja": "整列し終えた字は transform を 0 にそろえ、1 文字もずれたまま残さない", "en": "Settled characters end at exactly zero transform; none stays offset" }, { "ja": "本物の文は aria-label に残し、動きを減らす設定では整列した状態で止める", "en": "Keep the real text in aria-label, and stop on the aligned state with reduced motion" } ], "reproduction": { "prompt": { "ja": "文字の集合 — Scattered letters snap into place\n\n四方に散らばった文字が、回りながら戻って一列に整列する動きを作ってください。日本語の見出しと小さな英文を 1 字ずつ inline-block に割り、字ごとに固定の乱数で散った姿（横 ±42vw、縦 ±42vh、回転 ±260°、Y 軸の回転 ±120°、拡大率 0.5〜2.7）と戻り始めの遅れ（0〜0.35）を決めます。360vh の pin 区画の進み p から、字ごとの時間 t = clamp((p / 0.8 − 遅れ) / 0.65) を出し、easeOut（1 − (1 − t)⁴）で散った姿から整列した姿へ補間します。各字の transform の先頭に perspective(900px) を付けて奥行きを出し、不透明度は 0.15 から t に応じて 1 まで上げ、散っている字はアクセント色、整列し終えた字だけ本来の色にします。横へはみ出した字で横スクロールが出ないよう、舞台は overflow: clip にします。本物の文は aria-label に残し、動きを減らす設定では整列した状態で見せます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 散った姿は固定の乱数で決め、戻したときに同じ位置へ散る\n- 舞台は overflow: clip にして、はみ出した字で横スクロールを出さない\n- 整列し終えた字は transform を 0 にそろえ、1 文字もずれたまま残さない\n- 本物の文は aria-label に残し、動きを減らす設定では整列した状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-letters-scatter/demo.html", "en": "Letters scatter — Scattered letters snap into place\n\nMake letters scattered in every direction spin back and line up in a row. Split a Japanese heading and a small English line into inline-block characters, and give each character a fixed seeded scattered pose (±42vw horizontally, ±42vh vertically, ±260° rotation, ±120° Y-rotation, scale 0.5–2.7) and a return delay of 0–0.35. In a 360vh pinned section compute a per-character time t = clamp((p / 0.8 − delay) / 0.65) and interpolate from the scattered pose to the aligned one with an ease-out, 1 − (1 − t)⁴. Prefix each character’s transform with perspective(900px) for depth, raise opacity from 0.15 to 1 with t, and keep scattered characters accent-coloured so that only settled ones take their final colour. Clip the stage with overflow: clip so that characters flung sideways never produce a horizontal scrollbar. Keep the real text in aria-label, and with reduced motion show the aligned state. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Fix each scattered pose from a seeded random so scrolling back scatters to the same places\n- Clip the stage with overflow: clip so flung characters never create a horizontal scrollbar\n- Settled characters end at exactly zero transform; none stays offset\n- Keep the real text in aria-label, and stop on the aligned state with reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-letters-scatter/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-letters-scatter/demo.html", "html": "\n\n\n\n\n51 文字の集合 — Scattered letters snap into place\n\n\n\n

\n

\n

51

\n

文字の集合

\n

Scattered letters snap into place

\n

散らばった文字が回りながら整列する

\n

SCROLL ↓

\n

\n

\n\n

\n

\n

\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、四方に散った文字が回りながら戻り、一列に揃います。

\n

\n

\n\n

\n

\n

\n

言葉が集まる

\n

Letters find their place

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