生成中オーラ枠
AIが応答を生成している間、カードの外周を虹色グラデーションの光がゆっくり回る。完了すると光が静まり、回答が現れる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- AI が応答を生成している間のカード
- スケルトン行と外周の光で「考えている」を示す画面
- 完了で光が静まり回答に置き換わる演出
- 避ける場面
- 1秒未満で終わる処理（光が回り切らない）
- 常時表示のカード（装飾が主張しすぎる）
- 構成要素
- カード（オーラ枠）
- アバター・名前
- スケルトン行
- 回答本文
- 生成ボタン
- 持っている状態
- 通常
- 無効
- 読み込み中
- 成功
- キーボード
Tab で「生成する」ボタンへ、Enter／Space で開始。生成中は disabled になり「生成中…」の文言に変わる
- 支援技術
生成中はカードに aria-busy=true、ボタンは disabled＋「生成中…」。本文領域は aria-live=polite で完了時に回答を読み上げ、スケルトンは aria-hidden。reduced-motion では回転とシマーを止め静止グラデーションにする
- 動き
外周の光が 2.4s linear で1回転、行のシマー 1.4s（生成中）。reduced-motion で静止
デザインの要点
- 光は外周だけを回す。conic-gradient の角度を @property でアニメーションし、内側は白いカードで覆う二重構造にする
- 1周 2.4 秒は「考えている」と伝わる遅さ。速いと処理中のスピナーに見え、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" aria-live="polite">
<div class="glow-head"><span class="glow-avatar" aria-hidden="true">✦</span><span>AI アシスタント</span></div>
<div class="glow-lines" id="glow-lines" aria-hidden="true">
<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" type="button">生成する</button>
</div>