テキスト・スクランブル

使い方

src/Component.astro と src/motion.ts を同じフォルダーに置いて読み込みます。

<TextScramble
  eyebrow="STUDIO / 2026"
  lines={['DECODE THE', '静かな熱を、', '言葉に。']}
  lead="短い説明文"
  links={[{ label: 'WORKS', href: '/works' }]}
/>

• lines は見出しの行ごとの配列です。欧文は単語の途中で折り返さず、和文は文字の間で折り返します。
• links のラベルは、ポインターを合わせたときとキーボードで選んだときにデコードし直します。
• as で見出しのタグ（h1 / h2）を変えられます。

動きの仕組み

• mountTextScramble(root) が [data-text-scramble] ごとに動きを付け、後片付け用の関数を返します。
• 各グループは IntersectionObserver で画面に入ったときに一度だけ再生します。文字ごとに 0.035 秒ずつ遅れて確定し、確定した瞬間だけアクセント色になります。
• ノイズに入れ替わる間は、確定後の文字幅をその文字に固定するため、行の幅が揺れません。
• 読み上げには分割前の文章（見出しの aria-label、隠しテキスト）を使い、一文字ずつの表示は読み上げ対象から外しています。
• prefers-reduced-motion: reduce では何も動かしません。設定を途中で変えた場合も切り替わります。

調整する箇所

• 配色は --scramble-bg、--scramble-ink、--scramble-accent で変更できます。
• ノイズに使う文字は motion.ts の NOISE、揺れる時間は FLICKER、文字の間隔は STAGGER で調整します。

参考にした傾向

Webデザインクリップ に掲載された国内サイトでよく使われている「テキストエフェクト」の表現を参考に、このカタログ用に一から設計・実装しました。特定サイトのコード・画像・文言・配色は使っていません。

利用条件

このカタログ用に書き下ろした実装で、MITライセンスで公開しています。LICENSE、src/Component.astro、src/motion.ts を取得して利用できます。再配布する場合は LICENSE の著作権表示と許諾文を残してください。