【CodePen】ネオンエフェクト・グローエフェクトのアイデア10選

💡 実装のポイント
「neontubes」というウェブフォントを@font-faceで読み込み、text-shadowを8層（10px〜1000px）まで重ねることで輝き感を表現している構成。赤系（.webdev）はゆっくりしたblinkアニメーション、青系（.socod）は0.01sの超高速buzzアニメーションで蛍光管の振動感を再現している。will-change: opacityでGPU最適化済み。

💡 実装のポイント
カスタム要素<x-sign>ごとに--color1〜--color4のCSS変数を定義し、text-shadowの各層にvar()で適用している設計。@keyframes flickerはsteps(100)関数で細かいコマ送りにして蛍光管のちらつきを再現。JSは--interval変数をランダムに書き換えることで看板ごとに点滅周期をバラけさせている。

💡 実装のポイント
.neon-textに5層のtext-shadow（5px〜80px）を定義し、@keyframes glowで0%のピンク系（#ff005e）から100%のシアン系（#00d4ff）へ色変化させる最小構成のネオン。animation: glow 1.5s infinite alternateで色の往復を実現している。実装をシンプルに保ちたい場合の出発点として最適。

💡 実装のポイント
ラッパーとテキストそれぞれに::before/::afterを使いレイヤーを4枚重ねる構成。.text-effect-wrapper::beforeにradial-gradientをmix-blend-mode: color-dodgeで乗せてシマー（輝き移動）を表現し、::afterにbackdrop-filter: blur(1px) brightness(90%) contrast(150%)でコントラストを増強している。色変更は--color-1/--color-2の2変数で一括対応。:has()を使ったトグルでデザイン切り替えも可能な点もポイント。

💡 実装のポイント
通常時は@keyframes neon（0.08sの高速alternateアニメ）だけが動き、span:hoverで@keyframes flickerが追加される二段構えの設計（SCSSの&:hover構文でネスト記述）。neonはopacityの微変動で管のブレを再現し、flickerは不規則なキーフレーム（0%/19%/21%… と飛ばし指定）で断続的な消灯を演出している。SCSSで書かれているため、利用時はコンパイルが必要。

💡 実装のポイント
インラインSVGで「cOdePEN」の各文字とロゴを<path>で描画し、CSSのfilter: drop-shadow()と@keyframesのopacity変化でネオン管のちらつきを表現している構成。フリッカーするパーツとしないパーツが文字単位で分離されており、各<g>要素に別々のアニメーションが当たっている。テキストではなくSVGパスによるネオン演出の参考例として役立つ。

💡 実装のポイント
各<span>に:nth-child()でanimation-delayを0.25s刻みでずらすことで波状の点灯順序を実現している構成。@keyframes animateは0%/100%でtext-shadowとfilter: blur(2px)を適用（光っている状態）、5%/95%は消灯状態にして短い点灯→長い消灯→点灯のリズムを作っている。文字数を変える場合は<span>の追加とanimation-delayの追記だけで対応可能。

💡 実装のポイント
GSAPのgsap.timelineで文字ごとにi * 0.1の遅延を設けながら、onUpdateコールバック内でchars配列のランダム要素を差し込み続け、onCompleteで元の文字に確定させるデコーダー演出。ネオンの見た目はCSSのtext-shadow: 0 0 5px #00ff99, 0 0 15px #00ff99, 0 0 30px #00ff99の3層構成で、グリーン系の色はcolorプロパティとtext-shadowの色値を変えるだけで差し替えられる。

💡 実装のポイント
SVGの<filter id="texteffect">にfeGaussianBlur→feComponentTransfer→feCompositeを組み合わせて文字外周と内側のグロー層を生成し、それを<mask>でテキスト形状に切り抜く設計。<linearGradient id="gradient">のspreadMethod="repeat"で色を繰り返し敷き詰め、#fill矩形を@keyframes shiftで5秒かけて水平スクロールさせることで「グラデーションが流れる」演出を実現している。HTMLはPugプリプロセッサで記述されているため、利用時はコンパイル済みのHTMLに変換が必要。

💡 実装のポイント
4種類（グリッチ／ネオン／パルス／フリッカー）が.glitch-wrapper/.neon-wrapper/.pulse-wrapper/.flicker-wrapperで完全に分離されており、使いたい1ブロックのHTML+CSSだけ抜き出せる設計。ネオン（.neon）はtext-shadowを7層に重ねてneon-glowアニメーションで増幅、フリッカー（.flicker）は不規則なキーフレームでopacityを瞬間的に0.3まで落とす仕組みになっている。4種の見た目を同時比較できるので、演出を選ぶ際の参考にも使える。