DEMO
CODE
<div class="demo-stage"><svg class="ab-svg" viewBox="0 0 400 200" preserveAspectRatio="none"><defs><linearGradient id="ab-grad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#E91B89" stop-opacity="0"/><stop offset="50%" stop-color="#E91B89" stop-opacity="1"/><stop offset="100%" stop-color="#E91B89" stop-opacity="0"/></linearGradient></defs><path class="ab-base" d="M40,100 Q200,30 360,100"/><path class="ab-beam" d="M40,100 Q200,30 360,100"/></svg><div class="ab-node ab-left">A</div><div class="ab-node ab-right">B</div></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; position:relative; min-height:280px; }
.ab-svg { width:100%; max-width:420px; height:200px; }
.ab-base { fill:none; stroke:rgba(255,255,255,.08); stroke-width:1.5; }
.ab-beam { fill:none; stroke:url(#ab-grad); stroke-width:2.5; stroke-dasharray:90 360; stroke-linecap:round; animation:ab-move 2.2s linear infinite; }
@keyframes ab-move { from { stroke-dashoffset:450; } to { stroke-dashoffset:0; } }
.ab-node { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#1A1A1A; border:1px solid rgba(233,27,137,.6); color:#fff; font-family:'Oswald',sans-serif; display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px rgba(233,27,137,.35); }
.ab-left { left:calc(50% - 195px); }
.ab-right { right:calc(50% - 195px); }
AI PROMPT
2点間を光の粒子が流れるAnimated Beamエフェクトを作って（Magic UI定番）。SVGのpath（M40,100 Q200,30 360,100の曲線）を2つ重ね、下のpathは灰色の基準線、上のpathにlinearGradient（透明→ピンク→透明）をstrokeに適用しstroke-dasharray:90 360で90pxの光の塊を作る。stroke-dashoffsetを450→0へ2.2s linear infiniteでアニメーション、光が左→右へ流れる。両端にCSSで作った丸ノード（A/B）を配置しデータ連携の視覚化に。LP・APIインテグレーション説明に最適。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
2点間を光の粒子が流れるアニメーションビーム。Magic UI定番、LPでAPI連携・データフローを視覚化する際の鉄板表現。この効果はSVG要素をCSS（必要に応じてJavaScript）でアニメーションさせ、拡大しても劣化しないベクター図形のパスや塗りを動かします。
ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。