AI・生成体験
生成中オーラ枠
AIが応答を生成している間、カードの外周を虹色グラデーションの光がゆっくり回る。完了すると光が静まり、回答が現れる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
conic-gradient の角度を @property で定義した --glow-a としてアニメーションさせ、外周だけを回転する光にしています（内側は白いカードで覆う二重構造）。生成中を示すモチーフとして GeminiやApple Intelligence 系のUIで定番化した表現です。生成の開始/完了はここでは setTimeout で擬似再現しているので、実運用ではストリーミングの完了イベントで .gen クラスを付け外ししてください。prefers-reduced-motion では回転とシマーを止めています。
コード（コピーして使えます）
<div class="glow-demo">
<div class="glow-card" id="glow-card">
<div class="glow-inner">
<div class="glow-head"><span class="glow-avatar">✦</span><span>AI アシスタント</span></div>
<div class="glow-lines" id="glow-lines">
<span class="glow-ln"></span><span class="glow-ln"></span><span class="glow-ln short"></span>
</div>
<p class="glow-text" id="glow-text" hidden>要点はこの3つです。①下書きの自動生成、②表記ゆれの統一、③トーンの調整。順に反映しました。</p>
</div>
</div>
<button class="glow-btn" id="glow-btn">生成する</button>
</div>