漢字は大きくカクカクと、ひらがなは小さく丸く、カタカナは明朝の鋭さで。辞書に載った言葉だけが意味の色をまとい、動詞は文字ごとに動きだす。すべては実テキストのまま、選択もコピーもできる。
Playground
好きな文章を入力すると即座にスキャンして演出します。4つのレイヤーは独立にON/OFFでき、ページ再読込なしで反映します（空欄のときはサンプル文を表示）。
Variations
Playground と同じ文章を4つの組み合わせで並べ、レイヤーの効き方を横並びで比較します（768px未満では縦積み）。
再現ノート
参考元は映像・グラフィックとして作られた表現で、CSSに流用できる元データは存在しません。だからこそ「どの表現を、どの技法で模倣したか」を記録として残します。まず辞書エントリ（演出の唯一の定義箇所）から自動生成した対応表です。
| 単語 | 品詞 | 色・動き | 由来メモ |
|---|
unicode-range 合成フォント
元のMVは字種ごとに書体を描き分けていますが、Web側にその割当情報はありません。そこで @font-face の unicode-range で漢字・ひらがな・カタカナに別々のWebフォントを割り当て、1つの合成ファミリーとして束ねました。spanで包まずとも、全テキストに字種別の書体が一括で効きます。
size-adjust による字種サイズ差
映像では漢字が大きくひらがなが小さいリズムが作られますが、これもCSSには残りません。各 @font-face に size-adjust（漢字130% / カタカナ100% / ひらがな70%）を付け、マークアップなしで「漢字大・かな小」のコントラストを再現しました。テキストを差し替えても比率は保たれます。
語頭からの伝播 stagger
キネティックタイポの「文字が順に動きだす」感覚は、フレーム単位の演出で作られ数値は公開されていません。スキャナが辞書語を1文字 span に分解し、animation-delay: calc(var(--i) * 60ms) で語頭から遅延を伝播させて模倣しています。一様タイミングではなく起点からの波及にすることで、映像的なうねりを出しました。