Ripple Background

CODE

HTML

<div class="demo-stage rpb-stage">
  <span class="rpb-ring" aria-hidden="true"></span>
  <span class="rpb-ring" aria-hidden="true"></span>
  <span class="rpb-ring" aria-hidden="true"></span>
  <span class="rpb-ring" aria-hidden="true"></span>
  <div class="rpb-core">LIVE</div>
</div>

CSS

.rpb-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0B0B10; min-height:280px; overflow:hidden; }
.rpb-ring {
  position:absolute; top:50%; left:50%; width:120px; height:120px; margin:-60px 0 0 -60px;
  border:1px solid rgba(233,27,137,.55); border-radius:50%;
  transform:scale(.4); opacity:0;
  animation: rpb-expand 4s cubic-bezier(.2,.6,.35,1) infinite;
}
.rpb-ring:nth-child(1) { animation-delay:0s; }
.rpb-ring:nth-child(2) { animation-delay:1s; }
.rpb-ring:nth-child(3) { animation-delay:2s; }
.rpb-ring:nth-child(4) { animation-delay:3s; }
@keyframes rpb-expand {
  0%   { transform:scale(.4); opacity:0; }
  15%  { opacity:.9; }
  100% { transform:scale(3.4); opacity:0; }
}
.rpb-core {
  position:relative; width:96px; height:96px; border-radius:50%;
  background:#15151A; border:1px solid rgba(233,27,137,.7); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.24em;
  box-shadow:0 0 40px rgba(233,27,137,.22);
}
@media (prefers-reduced-motion: reduce) {
  .rpb-ring { animation:none; opacity:.25; transform:scale(1.6); }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

中心から同心円が静かに広がり続けるリップル背景をCSSだけで作って。円は border: 1px solid のみ・背景なし・border-radius: 50% の空要素を4つ置き、position: absolute で中心に重ねる（top:50%; left:50%; margin: -半径 0 0 -半径 で中央寄せ）。@keyframes は 0% で transform: scale(.4); opacity: 0、15% で opacity: .9、100% で transform: scale(3.4); opacity: 0。これで「小さく現れて大きく薄れる」波紋になる。4つに animation-delay を 0s / 1s / 2s / 3s と等間隔で振ると、周期4秒の中で常に1本ずつ広がり続ける状態になる。中心にはロゴやステータス表示を置くと「稼働中」「配信中」の意味が乗る。transform と opacity だけなのでGPU合成で動き、常時アニメーションでも軽い。注意: 親に overflow: hidden を付けること。円は最終的に親より大きくなる。

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

Ripple Background（同心円パルス背景）とは

中心から同心円が繰り返し広がる背景演出です。輪郭だけの円を scale と opacity で拡散させる構造で、要素数が少なく transform と opacity しか動かさないため、常時アニメーションでも負荷が小さいのが利点です。

当サイトの Ripple Effect はクリックした位置から波紋が1回だけ広がる「操作への反応」で、Material Design のボタンで知られる表現です。本ページは操作と無関係に一定周期で広がり続ける「状態の表示」という別テーマになります。ライブ配信中の表示やレーダーのメタファーとして使う場面が中心です。

本数を変えるときは animation-delay を「周期 ÷ 本数」で再計算してください。ここを揃えないと波紋が団子になって出ます。

よくある質問

リップル背景はどんな場面で使いますか？

「動いている・生きている」ことを示したい対象の周囲に置くのが定番です。ライブ配信中のインジケーター、位置情報のレーダー表示、CTAボタンの背後、ロゴの周囲などです。中心に置く要素の意味づけによって、同じ演出が「稼働中」にも「注目してほしい」にもなります。

波紋の間隔はどう決めますか？

animation-delay を「アニメーション周期 ÷ 円の本数」で等間隔に振るのが基本です。本ページは周期4秒・4本なので 0s / 1s / 2s / 3s としています。この計算をずらすと波紋が固まって出るため、本数を変えるときは delay も再計算してください。

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

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

RELATED EFFECTS

Ripple Background（同心円パルス背景）とは

よくある質問