Background & Ambient

2つの要素を結ぶ線に沿って、光るパルスが移動します。

[適用する場所]にビームアニメーション(Animated Beam)の効果を追加してください。コネクティングビーム(connecting beam)とも呼ばれます。
2つの要素を結ぶ線に沿って短く光るパルスが一定の速さで端から端へ進み、また最初から繰り返すようにしてください。なめらかで落ち着いた動きで。
つなぐ線そのものは常に表示し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はパルスを止めてください。

グラデーション背景の色がゆっくり移り変わったり、流れたり、回転したりします。

[適用する場所]にグラデーションアニメーション(Animated Gradient)の背景を追加してください。ムービンググラデーション(moving gradient)、gradient animation とも呼ばれます。
グラデーションの色がエリア全体をゆっくり流れるように、やわらかく途切れず漂わせ、ループが戻るときに跳ねが見えないようにしてください。
上に載るテキストはどの色の上でも読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。

線や正方形のグリッドで、セルがフェードしたり明滅したりします。

[適用する場所]にグリッドパターンアニメーション(Animated Grid Pattern)の背景を追加してください。フリッカリンググリッド(flickering grid)、グリッド背景(grid background)とも呼ばれます。
薄い線のグリッドは動かさず、散らばったいくつかのセルがそれぞれ違うタイミングでゆっくりフェードイン・アウトするようにしてください。静かで控えめに、一斉には光らせないでください。
コンテンツの背後に置いてクリックを受け取らないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は明滅を止めてください。

ぼかしたやわらかな色の帯が、オーロラのようにコンテンツの背後を漂います。

[適用する場所]にオーロラ背景(Aurora Background)を追加してください。ノーザンライツグラデーション(northern lights gradient)とも呼ばれます。
ぼかしたやわらかな色の帯がコンテンツの背後でゆっくり漂い揺れ、重なり溶け合ってオーロラのように見えるようにしてください。とてもゆっくり、夢のように。
上のテキストは読みやすく保ち、なめらかさを保つために帯のぼかしを毎フレームかけ直さないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。

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

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

斜めに傾いたタイルのグリッドが、ポインターが通るたびに色づいて光ります。

[適用する場所]に背景ボックス(Background Boxes)のエフェクトを追加してください。タイルホバー背景(tile hover background)とも呼ばれます。
エリアを斜めに傾いたタイルのグリッドで埋め、ポインターが通ったタイルはすぐに光ってからゆっくり元に戻り、短い軌跡が残るようにしてください。
タイルはコンテンツの背後に置いてクリックを妨げないようにし、タッチデバイスではタップしたタイルを光らせてください。

明るいハイライトがカードの枠線に沿って周回します。

[適用する場所]にボーダービーム(Border Beam)のエフェクトを追加してください。シャインボーダー(shine border)、ムービングボーダー(moving border)とも呼ばれます。
短く明るいハイライトがカードの枠線に沿って一定のゆったりした速さで周回し、つなぎ目が見えないようにループさせてください。
エフェクトでカードの内容やサイズが変わらないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はビームを止めてください。

ドットのグリッドが波のように明滅したり光ったりします。

[適用する場所]にドットパターングロー(Dot Pattern Glow)の背景を追加してください。ドットグロー背景(dotted glow background)、ドットグリッド(dot grid)とも呼ばれます。
細かいドットのグリッドは動かさず、柔らかい光の帯がその上をゆっくり横切り、通ったドットを光らせるようにしてください。穏やかで控えめに。
上に載るコンテンツが読みやすいようドットは薄くし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を止めてください。

光るランプのラインが横に広がり、下の見出しに光の円錐を投げかけます。

[適用する場所]にランプエフェクト(Lamp Effect)を追加してください。ランプグロー(lamp glow)とも呼ばれます。
セクションが画面に入ったら、細く光るラインが中央から左右に広がり、下の見出しに柔らかな光の円錐を投げかけ、見出しは浮き上がりながらフェードインするようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は照らされた見出しを最初から表示してください。

柔らかな光の筋が背景の上でゆらゆらと揺れます。

[適用する場所]にライトレイ(Light Rays)の背景を追加してください。ゴッドレイ(god rays)、ライトシャフト(light shafts)とも呼ばれます。
柔らかく半透明な光の筋を上から扇状に広げ、少し明るくなったり暗くなったりしながら左右にゆっくり揺れるようにしてください。ゆったりと雰囲気のある動きで。
光の筋はコンテンツの背後に置き、読みやすさを損なわない程度に薄くし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。

複数の色の点がなめらかに混ざり合いながら漂い、有機的で多彩な背景を作ります。

[適用する場所]にメッシュグラデーション(Mesh Gradient)の背景を追加してください。アニメーションメッシュグラデーション(animated mesh gradient)とも呼ばれます。
いくつかの柔らかな色の塊が互いに溶け合いながらエリア内をゆっくり漂い、背景が有機的に移り変わり続けるようにしてください。とてもゆっくりなめらかに。
どの色の混ざり具合でも上のコンテンツが読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。

光る尾を引く斜めの筋が、カードやセクションを横切って流れ落ちます。

[適用する場所]にメテオ(Meteors)のエフェクトを追加してください。流星群(meteor shower)、流れ星(shooting 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)とも呼ばれます。
端に向かってスクロールするコンテンツが、くっきりした線で切れるのではなく、なめらかに徐々にぼやけて柔らかくなるようにしてください。
ぼかしはその先にまだコンテンツがある端だけに表示し、ぼかした部分がクリックやスクロールを妨げないようにしてください。

傾いた遠近グリッドが、シンセウェーブの床のように手前へスクロールしてきます。

[適用する場所]にレトログリッド(Retro Grid)の背景を追加してください。パースペクティブグリッド(perspective grid)、シンセウェーブグリッド(synthwave grid)とも呼ばれます。
奥へ傾いた遠近のグリッドの床が手前へ一定の速さでスクロールし、地平線に向かってフェードアウトするようにしてください。なめらかに、終わりなく。
線が飛ばないよう継ぎ目のないループにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はスクロールを止めてください。

同心円が中心点から外側へ広がり、消えていきます。

[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。

小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。

[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。

柔らかな光の円錐や光だまりがすっと入ってきて、背景の一部を照らします。

[適用する場所]にスポットライト(Spotlight)のエフェクトを追加してください。スポットライトスイープ(spotlight sweep)、ライトコーン(light cone)とも呼ばれます。
ページが読み込まれたら、柔らかな光の円錐が角から斜めに差し込み、見出しの上で止まって、届くにつれて明るくなるようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から光が当たった状態で表示してください。

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

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

粒子が渦潮のように中心の周りをらせん状に回ります。

[適用する場所]にボルテックス(Vortex)の背景を追加してください。スワーリングパーティクル(swirling particles)とも呼ばれます。
小さな粒子が渦潮のように中心点の周りをらせん状に内側へ回り込み、外縁でフェードインして中心に近づくとフェードアウトする、なめらかで途切れない渦にしてください。
粒子の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は渦を止めてください。

重なり合う波線や波形が横方向にうねるように動きます。

[適用する場所]にウェーブ背景(Wave Background)を追加してください。ウェービー背景(wavy background)、アニメーテッドウェーブ(animated waves)とも呼ばれます。
重なった数本の波形が少しずつ違う速さで横へ流れ、水のように重なり合いながら移ろうようにしてください。ゆっくり、なめらかに。
各波はつなぎ目が見えないように途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。