Tile Light-up
タイルシフト
Generation Prompt
【対象要素】 - ページ内のアクセントとして置くグリッド状の装飾に適用する 【演出内容】 - 3×3のタイルが順番にアクセント色に点灯し、また消えていく、を繰り返す - 点灯は左上から右下へ流れるような順序にする 【品質要件】 - 同時に点灯するタイルは2〜3枚までにし、流れが追えるようにする - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A grid ornament placed as a page accent [Motion] - Tiles in a 3×3 grid light up in accent color one after another, then fade back - The lighting order flows from top-left to bottom-right [Quality] - Keep at most 2–3 tiles lit at once so the flow stays readable - 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.