Random Order Text

【対象要素】
- サイト内のテキスト1箇所（見出し・キャッチコピー・リード文等）に適用する

【演出内容】
- 文字が左からの順番ではなく、ばらばらの順序で現れて最後に全部そろう
- 出現順が読めないので、規則的な演出より賑やかに見える

【品質要件】
- 順序は毎回同じでよい（乱数を毎回振り直す必要はない）
- 文字ごとの時間差は36ms前後。全体が出そろうまでを2秒以内にする
- prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する
- 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない

[Target element]
- Apply to one piece of text on your site (a heading, a tagline, a lead paragraph, etc.)

[Motion]
- Characters appear in a scattered order rather than left to right, and all arrive by the end
- Because the order is unpredictable, it feels livelier than a regular sequence

[Quality requirements]
- The order can stay the same on every run (no need to reshuffle each time)
- Stagger about 36ms per character and finish within 2 seconds
- When prefers-reduced-motion is set, disable the animation and show the finished state from the start
- Never let the text become unreadable during the animation, and never shift the surrounding layout