本文へ移動

§16-13Motion

Ambient shader / orb

背景にぼかした光の円を漂わせる。

静止した画面に動きを与え、待機中やヒーロー領域の印象を柔らかくする。内容を邪魔しない控えめな装飾として使う。

実装のポイント

blur を掛けた大きな円を transform だけで漂わせると GPU 合成で済み軽い。常時動く装飾なので prefers-reduced-motion 時は animation を止める。

特徴
  • CSS のみ
  • アニメーション
デモで使っているもの
  • motion
  • lucide-react
  • Pointer Events