{ "id": "motion:motion-text-gather", "slug": "motion-text-gather", "kind": "motion", "title": { "ja": "粒子集結", "en": "Text gather" }, "aiName": "Particles assemble into text", "summary": { "ja": "散らばった粒が集まって文字になる", "en": "Scattered particles swirl together and settle into a line of text" }, "number": 47, "group": "text-motion", "techniques": [ "canvas", "scroll-progress" ], "rules": [ { "ja": "粒の位置は進みだけで決まる関数にする。戻したときに同じ道で散らばる", "en": "Make particle positions a pure function of progress so scrolling back scatters them along the same paths" }, { "ja": "出発の遅れと渦の向きは粒ごとに固定の乱数で決める。毎回同じ集まり方にする", "en": "Fix each particle’s delay and swirl from a seeded random so the assembly is identical every time" }, { "ja": "着いた粒は半径を広げて隣と重ね、文字が面として読めるようにする", "en": "Grow the radius on arrival so neighbours merge and the letters read as solid shapes" }, { "ja": "本物の文は読み上げ用に残し、動きを減らす設定では集まった文字で止める", "en": "Keep the real text for screen readers, and stop on the assembled text with reduced motion" } ], "reproduction": { "prompt": { "ja": "粒子集結 — Particles assemble into text\n\n散らばった粒が渦を巻いて集まり、一行の見出しになる動きを作ってください。見出しを画面外の canvas に太字で描いて画素を拾い、2px 刻み（粒が 9,000 を超えるなら刻みを広げる）で「行き先」を決めます。出発点は画面の中心のまわりの大きな輪（幅の 27〜65%）の上に、粒ごとにばらまきます。400vh の pin 区画で、進み 6% から 70% までに集め、あとは文字のまま残します。1 粒ごとに 0〜0.4 の出発の遅れと渦の向き・強さを持たせ、出発点と行き先を結ぶ線から横へ最大 90px ふくらむ弧を easeOut（1 − (1 − t)³）でたどらせます（着く手前でふくらみは 0 に戻る）。粒は小さな円で、着くにつれて半径が大きくなり隣と重なって文字の面になります。位置は進みだけで決まる関数にして、戻すと文字がまた粒にほどけます。本物の文は読み上げ用に視覚的に隠して残し、動きを減らす設定では集まった文字で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 粒の位置は進みだけで決まる関数にする。戻したときに同じ道で散らばる\n- 出発の遅れと渦の向きは粒ごとに固定の乱数で決める。毎回同じ集まり方にする\n- 着いた粒は半径を広げて隣と重ね、文字が面として読めるようにする\n- 本物の文は読み上げ用に残し、動きを減らす設定では集まった文字で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-text-gather/demo.html", "en": "Text gather — Particles assemble into text\n\nMake scattered particles swirl together and settle into a one-line heading. Draw the heading in bold on an off-screen canvas, read its pixels, and give each particle a destination every 2px, widening the step if there would be more than 9,000. Scatter each particle’s start point on a large ring around the canvas centre (27–65% of its width). In a 400vh pinned section gather them from 6% to 70% progress and then hold the text. Give each particle a start delay of 0–0.4, a swirl direction and strength, and move it along an arc that bulges sideways by up to 90px from the straight line between start and destination, easing out with 1 − (1 − t)³ and returning to zero bulge on arrival. Draw particles as small circles whose radius grows as they arrive so that neighbours merge into solid letters. Make position a pure function of progress so scrolling back unravels the text into particles. Keep the real text visually hidden for screen readers, and with reduced motion stop on the assembled text. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Make particle positions a pure function of progress so scrolling back scatters them along the same paths\n- Fix each particle’s delay and swirl from a seeded random so the assembly is identical every time\n- Grow the radius on arrival so neighbours merge and the letters read as solid shapes\n- Keep the real text for screen readers, and stop on the assembled text with reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-text-gather/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-text-gather/demo.html", "html": "\n\n\n\n\n47 粒子集結 — Particles assemble into text\n\n\n\n
\n
\n

47

\n

粒子集結

\n

Particles assemble into text

\n

散らばった粒が集まって文字になる

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、散らばった粒が渦を巻きながら集まり、下の文字になります。

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

言葉は、粒から生まれる。

\n \n

粒 0

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