Neon Flicker Text
ネオン点灯
Generation Prompt
【対象要素】 - サイト内のテキスト1箇所(見出し・キャッチコピー・リード文等)に適用する 【演出内容】 - ネオン管が点くときのように、数回ちらついてから安定して光り続ける - 発光は文字の周囲に淡く広がり、点灯後は一定の明るさで固定する 【品質要件】 - ちらつきは最初の0.3秒程度に収め、以降は安定させる - ちらつきの回数は3回程度まで。多用すると不快になる - prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する - 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない
[Target element] - Apply to one piece of text on your site (a heading, a tagline, a lead paragraph, etc.) [Motion] - Like a neon tube switching on, the text flickers a few times before holding a steady glow - The glow spreads softly around the letterforms and stays constant once lit [Quality requirements] - Confine the flicker to roughly the first 0.3s, then hold steady - Use about three flickers at most; more becomes unpleasant - When prefers-reduced-motion is set, disable the animation and show the finished state from the start - Never let the text become unreadable during the animation, and never shift the surrounding layout
Prompts and demo code are free to use in your own projects. See About.