{ "id": "motion:motion-text-scramble", "slug": "motion-text-scramble", "kind": "motion", "title": { "ja": "テキストスクランブル", "en": "Text scramble" }, "aiName": "Text scramble / decode effect", "summary": { "ja": "乱れた文字が読める文に定まる", "en": "Scrambled glyphs settle into readable text" }, "number": 25, "group": "text-motion", "techniques": [ "intersection-observer", "css-transition" ], "rules": [ { "ja": "文字は左から順に確定し、一度確定した文字は二度と乱さない", "en": "Characters settle from left to right, and a settled character is never scrambled again" }, { "ja": "各文字の幅を元の文字の幅に固定し、記号の切り替えで行の幅や折り返しを変えない", "en": "Lock each character to the width of its real glyph so swapping never changes the line's width or wrapping" }, { "ja": "元の文は HTML と aria-label に残し、乱れた記号は読み上げさせない", "en": "Keep the real text in the HTML and in aria-label, and hide the scrambled glyphs from screen readers" }, { "ja": "動きを減らす設定では乱さず、最初から読める文を表示する", "en": "With reduced motion, never scramble; show the readable text from the start" } ], "reproduction": { "prompt": { "ja": "テキストスクランブル — Text scramble / decode effect\n\n乱れた記号の列が、画面に入ると左から順に読める文へ定まる演出を作ってください。見出し（最大 72px、太字）と本文（20px、薄い色）を交互に 5 行並べ、どの行も最初は全部の文字をランダムな記号（# % & * + = ? ◆ ■ など 20 種）に置き換えておきます。行が画面の下から 30% の線を越えたら解読を始め、1.2 秒で終えます。最初の 20% の時間は全体が乱れたままで、残りの時間で左の文字から等間隔に 1 字ずつ元の文字に確定し、まだの文字は 50 ミリ秒ごとに別の記号へ切り替えます。乱れている文字はアクセント色を薄めた色、確定した文字は本来の文字色（0.2 秒で変化）にし、各文字の幅は元の文字の幅に固定して行が揺れないようにします。素の JavaScript（requestAnimationFrame と IntersectionObserver）と CSS だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 文字は左から順に確定し、一度確定した文字は二度と乱さない\n- 各文字の幅を元の文字の幅に固定し、記号の切り替えで行の幅や折り返しを変えない\n- 元の文は HTML と aria-label に残し、乱れた記号は読み上げさせない\n- 動きを減らす設定では乱さず、最初から読める文を表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-text-scramble/demo.html", "en": "Text scramble — Text scramble / decode effect\n\nBuild a text scramble effect where a row of random glyphs settles into readable text, left to right, as it enters the viewport. Lay out five lines alternating between a bold heading (up to 72px) and body text (20px, muted), and start every line with all of its characters replaced by random glyphs drawn from a set of 20 (# % & * + = ? ◆ ■ and so on). A line starts decoding when it crosses a line 30% up from the bottom of the viewport, and finishes in 1.2 seconds. For the first 20% of that time the whole line stays scrambled; over the rest, characters lock to their real value one by one from the left at even intervals, while the ones still waiting switch to another glyph every 50 milliseconds. Scrambled characters use a lightened accent colour and settled ones take the normal text colour over 0.2 seconds, and each character keeps the width of its real glyph so the line never shifts. Implement it with plain JavaScript (requestAnimationFrame and IntersectionObserver) and CSS only, with no library.\n\nDo not drop:\n- Characters settle from left to right, and a settled character is never scrambled again\n- Lock each character to the width of its real glyph so swapping never changes the line's width or wrapping\n- Keep the real text in the HTML and in aria-label, and hide the scrambled glyphs from screen readers\n- With reduced motion, never scramble; show the readable text from the start\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-text-scramble/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-text-scramble/demo.html", "html": "\n\n\n\n\n25 テキストスクランブル — Text scramble / decode effect\n\n\n\n
\n
\n

25

\n

テキストスクランブル

\n

Text scramble / decode effect

\n

乱れた文字が読める文に定まる

\n

SCROLL ↓

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

Line 1

\n

見出しが入ります

\n
\n
\n
\n

Line 2

\n

本文のダミーです。画面に入ると、乱れた記号が左から順に読める文へ定まります。

\n
\n
\n
\n

Line 3

\n

記号から文へ、左から順に

\n
\n
\n
\n

Line 4

\n

二つ目の本文のダミーです。一度定まった文字は、そのあと動きません。

\n
\n
\n
\n

Line 5

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