Chevron Flow
シェブロンフロー
Generation Prompt
【対象要素】 - 「次へ進む」方向を示す矢印群(› › ›)に適用する 【演出内容】 - 並んだ山括弧が進行方向に向かって順番に明るくなり、流れを示し続ける 【品質要件】 - 1つずつ順に光らせ、光が右へ流れて見えるよう遅延を揃える - 明るくなるときにわずかに進行方向へ動かす(数px) - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A row of chevrons (› › ›) pointing the way forward [Motion] - Chevrons light up in sequence toward the direction of travel, forever [Quality] - Stagger delays evenly so the light flows one way - Nudge each chevron a few px forward as it lights - 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.