Border Trace
ボーダートレース
Generation Prompt
【対象要素】 - カードやボタンなど枠線を持つ要素に適用する 【演出内容】 - 薄い枠線の上を、明るい光の線分が一定速度で周回し続ける 【品質要件】 - 光の線分は枠の1辺より短くし、頭と尾の境目をはっきりさせる - 角でも速度が変わらないように等速で回す - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A card or button with a visible border [Motion] - A bright segment of light travels around the faint border, endlessly [Quality] - Keep the segment shorter than one side, with a clear head and tail - Constant speed, even through corners - Make the loop seamless: the end state must match the start state exactly - With prefers-reduced-motion, stop the animation and show a static finished state
Prompts and demo code are free to use in your own projects. See About.