Comet Orbit Button
コメット周回
Generation Prompt
【対象要素】 - サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する 【演出内容】 - 待機中、光の点が尾を引きながらボタンの枠線の上をゆっくり周回し続ける - ホバーした瞬間、光が一気に加速して枠を1周し、走り終えたら元のゆっくりした周回に戻る 【品質要件】 - 待機時の1周は4〜5秒、ホバー時の加速した1周は0.8秒前後 - 光は枠線の上だけを通り、内側の面には漏れないようにする - 加速の周回は必ず1周で終え、回り続けない - prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする - ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない
[Target element] - Apply to a single button on your site (a CTA, a link button, a form submit button, etc.) [Motion] - While idle, a point of light with a trailing tail orbits slowly along the button's border - The instant it is hovered, the light accelerates and makes exactly one fast lap, then returns to its slow orbit [Quality requirements] - One idle lap takes 4-5s; the accelerated lap takes about 0.8s - The light travels only along the border and must not bleed onto the inner surface - The accelerated pass must end after exactly one lap and not keep spinning - When prefers-reduced-motion is set, disable the animation and fall back to a static state change - Never reduce the legibility of the label; do not create a moment where the text cannot be read
Prompts and demo code are free to use in your own projects. See About.