Animated Shiny Text

DEMO

<div class="demo-stage ast-stage">
  <span class="ast-badge"><span class="ast-dot" aria-hidden="true"></span><span class="ast-text">✨ Introducing Motion Lab</span></span>
  <h3 class="ast-head">ANIMATED SHINY TEXT</h3>
</div>

.ast-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem; padding:3rem 1.5rem; background:#0B0B10; min-height:280px; }
.ast-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
}
.ast-dot { width:6px; height:6px; border-radius:50%; background:#E91B89; box-shadow:0 0 8px 2px rgba(233,27,137,.55); }
.ast-text, .ast-head {
  background-image:linear-gradient(110deg, #6E6E7A 0%, #6E6E7A 40%, #FFFFFF 50%, #6E6E7A 60%, #6E6E7A 100%);
  background-size:220% 100%;
  background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation: ast-shine 3.4s linear infinite;
}
.ast-text { font-family:'Inter',sans-serif; font-size:.85rem; letter-spacing:.04em; }
.ast-head { font-family:'Oswald',sans-serif; font-size:clamp(1.4rem,6vw,2.4rem); letter-spacing:.14em; }
@keyframes ast-shine {
  from { background-position:180% 0; }
  to   { background-position:-80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ast-text, .ast-head { animation:none; background-position:50% 0; }
}

AI PROMPT

落ち着いた色の文字の上を白いハイライトが周期的に通り過ぎるシャイニーテキストをCSSだけで作って。文字に background-image: linear-gradient(110deg, ベース色 0%, ベース色 40%, #fff 50%, ベース色 60%, ベース色 100%) を敷き、background-size: 220% 100% と広げる。background-clip: text（-webkit-background-clip: text も併記）と color: transparent（-webkit-text-fill-color: transparent も併記）で、背景を文字の形に切り抜く。@keyframes で background-position を 180% 0 から -80% 0 へ linear で動かすと、白い帯だけが文字を横切って見える。ハイライトの幅はグラデーションの白い区間（40%〜60%）を狭めるほど細く鋭くなる。角度は 110deg 程度にすると斜めに走って自然。バッジやラベルなど小さいテキストに使うと「新機能」の告知に、見出しに使うとブランドの高級感に効く。注意: 背景を文字で切り抜く都合上、文字色は color ではなくグラデーション側で決まるため、非対応環境で文字が消えないよう color をフォールバックとして先に指定しておくこと。

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

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

BOOKS · PR · AMAZON

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

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

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