Text Scroll Highlight

DEMO

SCROLL ME ↓

見た目を確かめて、コードを掴んで、 AIに渡すだけ。 Motion Lab はその3手を最短でつなぐカタログです。

END

CODE

HTML

<div class="demo-stage tsh-stage">
  <div class="tsh-scroller">
    <p class="tsh-hint">SCROLL ME ↓</p>
    <p class="tsh-copy">
      <span class="tsh-w">見た目を</span> <span class="tsh-w">確かめて、</span> <span class="tsh-w">コードを</span> <span class="tsh-w">掴んで、</span>
      <span class="tsh-w">AIに</span> <span class="tsh-w">渡すだけ。</span> <span class="tsh-w">Motion Lab は</span> <span class="tsh-w">その3手を</span>
      <span class="tsh-w">最短で</span> <span class="tsh-w">つなぐ</span> <span class="tsh-w">カタログです。</span>
    </p>
    <p class="tsh-end">END</p>
  </div>
</div>

CSS

.tsh-stage { position:relative; min-height:280px; background:#0B0B10; padding:0; overflow:hidden; }
.tsh-scroller { height:320px; overflow-y:auto; padding:1.6rem 2rem 4rem; }
.tsh-hint { font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.28em; color:#E91B89; margin-bottom:1.4rem; }
.tsh-copy { font-family:'Oswald',sans-serif; font-size:clamp(1.1rem,4.6vw,1.5rem); line-height:2; letter-spacing:.06em; }
.tsh-w { color:#FFFFFF; }
@supports (animation-timeline: view()) {
  .tsh-w {
    color:rgba(255,255,255,.16);
    animation: tsh-lit linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 46%;
  }
}
@keyframes tsh-lit {
  from { color:rgba(255,255,255,.16); }
  to   { color:#FFFFFF; }
}
.tsh-end { margin-top:2.4rem; font-family:'Oswald',sans-serif; font-size:1.1rem; letter-spacing:.24em; color:#3A3A44; }
@media (prefers-reduced-motion: reduce) {
  .tsh-w { animation:none; color:#FFFFFF; }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

スクロールに合わせて単語がひとつずつ濃く浮かび上がる読ませる演出を、JavaScriptなしで作って。文章を単語単位の <span> に分割し（日本語なら文節単位が読みやすい）、各 span に animation-timeline: view(); animation-range: entry 30% cover 46%; を指定する。keyframes は from { color: rgba(255,255,255,.16) } to { color: #fff } の色の変化だけ。span はインライン要素なので、それぞれが画面に入るタイミングが自然にずれ、行の左から右へ順に点灯していく。animation-fill-mode は both（linear both）にして、通過後は明るいまま保持する。必ず @supports (animation-timeline: view()) で囲み、非対応ブラウザでは最初から白い文字が表示されるようにすること（囲み忘れると、非対応環境で本文がほぼ読めない灰色のまま固定されるという重大な事故になる）。要素数が多い長文には向かないので、キーメッセージ2〜3行に絞ること。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

Text Scroll Highlight（スクロール連動の語ハイライト）とは

スクロールに合わせて単語や文節がひとつずつ濃く浮かび上がる演出です。Magic UI の Text Reveal として知られ、ランディングページの中盤で「読ませたい一文」に視線を留める用途で使われます。

当サイトの Text Reveal はマスクで文字が現れる出現アニメーション、Word Pull Up は単語が下から立ち上がる出現アニメーションで、いずれも一度出たら終わりです。本ページはスクロール位置に連動して進行し、戻せば巻き戻る別テーマになります。読む速度と演出の速度が一致するのが最大の特徴です。

@supports の囲みを省くと、非対応ブラウザで本文が薄い灰色のまま固定され、文章が読めなくなります。装飾ではなく本文に掛ける演出のため、フォールバックの設計が特に重要です。

よくある質問

対応していないブラウザでは文章が読めなくなりませんか？

@supports で囲めば問題ありません。既定の color を通常の文字色（白）にしておき、@supports (animation-timeline: view()) のブロック内で初めて薄い色とアニメーションを指定します。この順序を逆にすると、非対応環境で本文が薄いまま固定されるという致命的な事故になります。本ページのコードは正しい順序で書いてあります。

日本語ではどの単位で区切るのが自然ですか？

英語のような単語区切りではなく文節単位が読みやすくなります。「見た目を」「確かめて、」のように、助詞まで含めた塊で区切ると点灯のリズムが日本語の読みと合います。文字単位まで細かく分けると点滅がうるさく、可読性を損ないます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

Text Scroll Highlight（スクロール連動の語ハイライト）とは

よくある質問