DEMO
カード周辺をビームが旋回します。Aceternity UI 定番。
CODE
<div class="demo-stage"><div class="bb-card"><div class="bb-content"><h3>BORDER BEAM</h3><p>カード周辺をビームが旋回します。Aceternity UI 定番。</p></div></div></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; }
.bb-card { position:relative; width:280px; padding:2rem; background:#1A1A1A; border-radius:14px; overflow:hidden; isolation:isolate; }
.bb-card::before { content:""; position:absolute; inset:-2px; border-radius:16px; padding:2px; background:conic-gradient(from var(--a,0deg), transparent 0deg, transparent 300deg, #E91B89 340deg, #fff 350deg, #E91B89 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:bb-spin 4s linear infinite; }
@property --a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes bb-spin { to { --a:360deg; } }
.bb-content h3 { color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.15em; margin-bottom:.7rem; }
.bb-content p { color:#9A9A9A; font-size:.9rem; line-height:1.7; }
AI PROMPT
カード枠を光のビームが時計回りに走るBorder Beamエフェクトを作って（Aceternity UI 定番）。親要素にposition:relative+overflow:hidden、::before疑似要素にinset:-2px+padding:2pxで枠の太さ、background:conic-gradient(from var(--a), transparent 300deg, #E91B89 340deg, #fff 350deg)で光の弧を作成。-webkit-mask + mask-compositeでborderの内側だけくり抜き、@property --a + animationでconic角度を0→360degに無限回転。Chrome/Edge/Safari対応（@propertyは要モダンブラウザ）。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
カード枠の周りを光のビームが時計回りに走り続けるAceternity UI定番のエフェクト。SaaS LP・特集カードのアテンション獲得に最適。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。