Letters decode
on the way in.
ホバーした位置を起点に、近い文字から順にデコードが伝染して「正解」へ収束する。カーソルを置いた場所から波紋のように解けていく。下のリンクや見出しの左右どちら側から入るかで、伝播の向きが変わるのを確かめて。
ホバーして確かめる
— HOVER ME
SWAP（hover で別テキストへ）
HOVER ME
ホバー
ANIMATION
使い方
— USAGE
01
2 ファイルをコピー
本ディレクトリの style.css（`.ts-dud` の色だけ）と script.js を移植先にコピー。外部依存ゼロ。
02
属性を付けるだけ
シャッフルさせたい要素に class="ts" data-text-shuffle を付ける。初期テキストがそのまま「正解」になり、ホバーで再デコードする。
03
スワップ / 字種 / 伝播
data-shuffle-to で別テキストへ入れ替え、data-shuffle-chars で巡るグリフ集合、data-shuffle-spread で伝播の速さ（波の広がり）を制御。
data 属性
data-text-shuffle有効化マーカー（値不要）—data-shuffle-onトリガー。hover（既定）／ load（読み込み時に1回）hoverdata-shuffle-toホバーで入れ替える先のテキスト（離れると戻る）なしdata-shuffle-charsシャッフル中に巡るグリフ集合記号+カナ+数字data-shuffle-spread伝播の波が最遠の文字へ届くまでのフレーム数（大きいほどゆっくり広がる）40CSS 変数
--ts-dudシャッフル中の「乱れた文字」の色#ff2d55