Lamp Glow Heading

DEMO

<div class="demo-stage lgh-stage">
  <div class="lgh-lamp" aria-hidden="true">
    <span class="lgh-cone lgh-cone-l"></span>
    <span class="lgh-cone lgh-cone-r"></span>
    <span class="lgh-line"></span>
    <span class="lgh-bulb"></span>
  </div>
  <h3 class="lgh-head">BUILD IN<br>THE SPOTLIGHT</h3>
</div>

.lgh-stage { position:relative; display:flex; align-items:flex-end; justify-content:center; padding:0 1.5rem 2.6rem; background:#08080C; min-height:300px; overflow:hidden; isolation:isolate; }
.lgh-lamp { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:520px; height:190px; }
.lgh-cone { position:absolute; top:0; width:50%; height:180px; filter:blur(28px); opacity:.55; }
.lgh-cone-l { left:0; background:conic-gradient(from 250deg at 100% 0%, rgba(233,27,137,.75) 0deg, transparent 42deg); }
.lgh-cone-r { right:0; background:conic-gradient(from 68deg at 0% 0%, transparent 0deg, rgba(91,170,222,.75) 42deg); }
.lgh-line {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64%; height:2px;
  background:linear-gradient(90deg, transparent, #E91B89 30%, #fff 50%, #5BAADE 70%, transparent);
  animation: lgh-breathe 4.5s ease-in-out infinite alternate;
}
.lgh-bulb {
  position:absolute; top:-46px; left:50%; transform:translateX(-50%);
  width:180px; height:92px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.55), transparent 70%);
  filter:blur(22px);
  animation: lgh-breathe 4.5s ease-in-out infinite alternate;
}
@keyframes lgh-breathe {
  from { opacity:.55; }
  to   { opacity:1; }
}
.lgh-head {
  position:relative; z-index:1; text-align:center;
  font-family:'Oswald',sans-serif; font-size:clamp(1.5rem,7vw,2.6rem); line-height:1.15; letter-spacing:.1em;
  background:linear-gradient(180deg,#FFFFFF 0%, #9A9AA5 100%);
  background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion: reduce) {
  .lgh-line, .lgh-bulb { animation:none; opacity:.85; }
}

AI PROMPT

上部の光源から円錐状の光が降りてきて見出しを照らす「ランプエフェクト」をCSSだけで作って。構成は4層。1) 左右の光の円錐＝それぞれ conic-gradient(from 250deg at 100% 0%, 光色 0deg, transparent 42deg) と鏡像の指定を持つ2つのボックスに filter: blur(28px) を掛ける。2) 光源のライン＝上端中央に細い横線を置き、linear-gradient(90deg, transparent, 色A, #fff, 色B, transparent) で中央が白く両端が消えるようにする。3) 電球のにじみ＝ラインの上に radial-gradient(closest-side, rgba(255,255,255,.55), transparent) の楕円を blur で溶かす。4) 見出し＝position: relative と z-index で光の上に置き、上が白・下が灰色の linear-gradient を background-clip: text で流し込むと、上から照らされた質感になる。ラインと電球に opacity を往復させる呼吸アニメーション（4〜5秒・alternate）を掛けると生きた光になる。親には overflow: hidden と isolation: isolate を付けて、光がはみ出さず重ね順も安定させること。背景は必ず暗色にすること（明るい背景では光が見えない）。

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