Aurora Card

DEMO

CODE

<div class="demo-stage ac-stage">
  <div class="ac-card">
    <div class="ac-glow ac-glow-1"></div>
    <div class="ac-glow ac-glow-2"></div>
    <p class="ac-label">NORTHERN LIGHTS</p>
    <div class="ac-title">Aurora Card</div>
    <p class="ac-desc">Soft aurora curtains drifting behind the content.</p>
  </div>
</div>

.ac-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:320px; }
.ac-card {
  position:relative; overflow:hidden; width:min(320px,100%); padding:2.2rem 1.8rem;
  background:#15151A; border:1px solid rgba(255,255,255,.12); border-radius:16px;
}
.ac-glow { position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(48px); opacity:.5; pointer-events:none; }
.ac-glow-1 { top:-110px; left:-40px; background:radial-gradient(circle, #22d3ee, #a78bfa 70%, transparent); animation: ac-drift1 9s ease-in-out infinite; }
.ac-glow-2 { top:-90px; right:-60px; background:radial-gradient(circle, #f472b6, #34d399 70%, transparent); animation: ac-drift2 11s ease-in-out infinite; }
@keyframes ac-drift1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(50px,20px) scale(1.15); }
}
@keyframes ac-drift2 {
  0%, 100% { transform: translate(0,0) scale(1.1); }
  50% { transform: translate(-45px,15px) scale(.95); }
}
.ac-label { position:relative; font-family:'Oswald',sans-serif; font-size:.65rem; letter-spacing:.3em; color:#8b8b95; margin:0 0 .6rem; }
.ac-title { position:relative; font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.04em; color:#fff; margin:0 0 .5rem; }
.ac-desc { position:relative; font-size:.82rem; line-height:1.7; color:#a9a9b2; margin:0; }

AI PROMPT

カード上部でオーロラのカーテンがゆらめくダークカードをCSSだけで作って。カードは overflow:hidden のダーク背景。中に radial-gradient のブロブ2つ（シアン→紫系とピンク→緑系）を絶対配置し、filter:blur(48px) で大きく滲ませる。@keyframes でそれぞれ逆方向に translate + scale を9秒/11秒の異なる周期で往復させると、周期がずれて自然な揺らぎになる。テキストは position:relative でブロブより手前に。プライシングカード・特集カード向け。

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