Meteors (メテオ)

細く光る線が経路に沿って進み、ときには面にぶつかって弾けます。

[適用する場所]に背景ビーム(Background Beams)の効果を追加してください。ライトビーム(light beams)、背景ライン(background lines)とも呼ばれます。
薄い曲線の経路を背景に置き、その上を短く光る筋が一つずつ、落ち着いた一定のペースで進むようにしてください。
ビームはタイミングをずらして同時に動かないようにし、コンテンツの背後に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。

宇宙のような暗い背景の上で、小さな星がまたたいたり漂ったりします。

[適用する場所]にスターフィールド(Starfield)の背景を追加してください。星空背景(stars background)、またたく星(twinkling stars)とも呼ばれます。
大きさの異なる小さな星がそれぞれのペースで柔らかくまたたき、星空全体はとてもゆっくり漂うようにしてください。静かで穏やかに。
軽く動くよう星の数は控えめにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はまたたきと漂う動きを止めてください。

細かな粒状のテクスチャがページに重なり、ときにフィルムグレインのようにちらつきます。

[適用する場所]にノイズ/グレインテクスチャ(Noise / Grain Texture)のオーバーレイを追加してください。フィルムグレイン(film grain)、ノイズ背景(noise background)とも呼ばれます。
細かく薄い粒状のテクスチャを表面に重ね、フィルムグレインのように小刻みにちらつかせてください。控えめに、コンテンツを濁らせるほど強くしないでください。
クリックはオーバーレイを通り抜けるようにし、テクスチャは毎フレームではなく一度だけ生成し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。

たくさんの小さな点が背景を漂い、つながったりポインターに反応したりします。

[適用する場所]にパーティクル(Particles)の背景を追加してください。フローティングパーティクル(floating particles)、パーティクルフィールド(particle field)とも呼ばれます。
大きさの異なる小さな点が、それぞれのペースでゆるやかにさまよう軌道を描いてゆっくり漂うようにしてください。穏やかで軽やかに。
遅いデバイスでも軽く動くよう点の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。

ぼかしの強さが端に向かって徐々に増し、コンテンツが柔らかく消えていきます。

[適用する場所]にプログレッシブブラー(Progressive Blur)の端を追加してください。グラデーションブラーエッジ(gradient blur edge)とも呼ばれます。
端に向かってスクロールするコンテンツが、くっきりした線で切れるのではなく、なめらかに徐々にぼやけて柔らかくなるようにしてください。
ぼかしはその先にまだコンテンツがある端だけに表示し、ぼかした部分がクリックやスクロールを妨げないようにしてください。