Particles (パーティクル)
別名 Floating particles, Particle field
たくさんの小さな点が背景を漂い、つながったりポインターに反応したりします。
使いどころ
ヒーローやセクションの背景
バリエーション
- floating
- connected lines
- pointer-repel
- 3D floating
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にパーティクル(Particles)の背景を追加してください。フローティングパーティクル(floating particles)、パーティクルフィールド(particle field)とも呼ばれます。
大きさの異なる小さな点が、それぞれのペースでゆるやかにさまよう軌道を描いてゆっくり漂うようにしてください。穏やかで軽やかに。
遅いデバイスでも軽く動くよう点の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。似ているモーション
Starfield (スターフィールド)
別名 Stars background, Twinkling stars
宇宙のような暗い背景の上で、小さな星がまたたいたり漂ったりします。
使いどころ
宇宙や夜がテーマのヒーロー
[適用する場所]にスターフィールド(Starfield)の背景を追加してください。星空背景(stars background)、またたく星(twinkling stars)とも呼ばれます。
大きさの異なる小さな星がそれぞれのペースで柔らかくまたたき、星空全体はとてもゆっくり漂うようにしてください。静かで穏やかに。
軽く動くよう星の数は控えめにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はまたたきと漂う動きを止めてください。ABC
Sparkles (スパークル)
別名 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。
使いどころ
見出し、プレミアム感のあるアクセント
[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Vortex (ボルテックス)
別名 Swirling particles
粒子が渦潮のように中心の周りをらせん状に回ります。
使いどころ
ドラマチックなヒーロー背景
[適用する場所]にボルテックス(Vortex)の背景を追加してください。スワーリングパーティクル(swirling particles)とも呼ばれます。
小さな粒子が渦潮のように中心点の周りをらせん状に内側へ回り込み、外縁でフェードインして中心に近づくとフェードアウトする、なめらかで途切れない渦にしてください。
粒子の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は渦を止めてください。A
クリックしてください
Confetti (紙吹雪)
別名 Confetti burst, Celebration
色とりどりの紙片がはじけ出て舞い落ち、成功を祝います。
使いどころ
購入完了、目標達成
[適用する場所]に紙吹雪(Confetti)のお祝い演出を追加してください。コンフェッティバースト(confetti burst)とも呼ばれます。
色とりどりの小さな紙片がボタンから素早くはじけ出て、くるくる回りながらふわりと舞い落ち、消えていくようにしてください。短く賑やかに。
ループさせず成功ごとに一度だけ発動し、ページのクリックを妨げないようにして、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。Background & Ambientのほかのモーション
ABCDEFGHIJKL
中をスクロールしてください
Progressive Blur (プログレッシブブラー)
別名 Gradient blur edge
ぼかしの強さが端に向かって徐々に増し、コンテンツが柔らかく消えていきます。
使いどころ
スクロールコンテナの端、ヘッダー
[適用する場所]にプログレッシブブラー(Progressive Blur)の端を追加してください。グラデーションブラーエッジ(gradient blur edge)とも呼ばれます。
端に向かってスクロールするコンテンツが、くっきりした線で切れるのではなく、なめらかに徐々にぼやけて柔らかくなるようにしてください。
ぼかしはその先にまだコンテンツがある端だけに表示し、ぼかした部分がクリックやスクロールを妨げないようにしてください。Retro Grid (レトログリッド)
別名 Perspective grid, Synthwave grid
傾いた遠近グリッドが、シンセウェーブの床のように手前へスクロールしてきます。
使いどころ
レトロ・未来的なヒーロー
[適用する場所]にレトログリッド(Retro Grid)の背景を追加してください。パースペクティブグリッド(perspective grid)、シンセウェーブグリッド(synthwave grid)とも呼ばれます。
奥へ傾いた遠近のグリッドの床が手前へ一定の速さでスクロールし、地平線に向かってフェードアウトするようにしてください。なめらかに、終わりなく。
線が飛ばないよう継ぎ目のないループにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はスクロールを止めてください。A
Ripple Rings (リップルリング)
別名 Background ripple, Concentric ripples
同心円が中心点から外側へ広がり、消えていきます。
使いどころ
ヒーローの中心要素、音声やペアリングのビジュアル
[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。