Aurora Text

DEMO

CODE

<div class="demo-stage at-stage"><span class="at-text">AURORA</span></div>

.at-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.at-text {
  font-family:'Oswald',sans-serif; font-size:clamp(3rem,10vw,5rem); font-weight:600; letter-spacing:.05em;
  background: linear-gradient(115deg, #22d3ee 0%, #a78bfa 25%, #f472b6 50%, #34d399 75%, #22d3ee 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(167,139,250,.35));
  animation: at-flow 8s ease-in-out infinite;
}
@keyframes at-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

AI PROMPT

文字の中をオーロラのような多色グラデーションが流れるテキストをCSSだけで作って。linear-gradient(115deg, シアン→紫→ピンク→緑→シアン) を background-size:300% 300% で拡大し、-webkit-background-clip:text と color:transparent で文字に切り抜く。@keyframes で background-position を 0%→100%→0% に8秒かけて往復させると波のように流れる。drop-shadow でほのかな発光を足すとオーロラ感が増す。ヒーロー見出し・ブランドロゴ向け。

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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。