Aurora Background (オーロラ背景)
別名 Northern lights gradient
ぼかしたやわらかな色の帯が、オーロラのようにコンテンツの背後を漂います。
使いどころ
ヒーローセクション
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にオーロラ背景(Aurora Background)を追加してください。ノーザンライツグラデーション(northern lights gradient)とも呼ばれます。
ぼかしたやわらかな色の帯がコンテンツの背後でゆっくり漂い揺れ、重なり溶け合ってオーロラのように見えるようにしてください。とてもゆっくり、夢のように。
上のテキストは読みやすく保ち、なめらかさを保つために帯のぼかしを毎フレームかけ直さないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。似ているモーション
Mesh Gradient (メッシュグラデーション)
別名 Animated mesh gradient
複数の色の点がなめらかに混ざり合いながら漂い、有機的で多彩な背景を作ります。
使いどころ
ランディングページの背景
[適用する場所]にメッシュグラデーション(Mesh Gradient)の背景を追加してください。アニメーションメッシュグラデーション(animated mesh gradient)とも呼ばれます。
いくつかの柔らかな色の塊が互いに溶け合いながらエリア内をゆっくり漂い、背景が有機的に移り変わり続けるようにしてください。とてもゆっくりなめらかに。
どの色の混ざり具合でも上のコンテンツが読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。Animated Gradient (グラデーションアニメーション)
別名 Gradient animation, Moving gradient, Background gradient animation
グラデーション背景の色がゆっくり移り変わったり、流れたり、回転したりします。
使いどころ
ヒーローの背景、ボタン
[適用する場所]にグラデーションアニメーション(Animated Gradient)の背景を追加してください。ムービンググラデーション(moving gradient)、gradient animation とも呼ばれます。
グラデーションの色がエリア全体をゆっくり流れるように、やわらかく途切れず漂わせ、ループが戻るときに跳ねが見えないようにしてください。
上に載るテキストはどの色の上でも読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。Light Rays (ライトレイ)
別名 God rays, Light shafts
柔らかな光の筋が背景の上でゆらゆらと揺れます。
使いどころ
雰囲気のあるヘッダー
[適用する場所]にライトレイ(Light Rays)の背景を追加してください。ゴッドレイ(god rays)、ライトシャフト(light shafts)とも呼ばれます。
柔らかく半透明な光の筋を上から扇状に広げ、少し明るくなったり暗くなったりしながら左右にゆっくり揺れるようにしてください。ゆったりと雰囲気のある動きで。
光の筋はコンテンツの背後に置き、読みやすさを損なわない程度に薄くし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Wave Background (ウェーブ背景)
別名 Wavy background, Animated waves
重なり合う波線や波形が横方向にうねるように動きます。
使いどころ
セクションの区切り、ヒーローの下端
[適用する場所]にウェーブ背景(Wave Background)を追加してください。ウェービー背景(wavy background)、アニメーテッドウェーブ(animated waves)とも呼ばれます。
重なった数本の波形が少しずつ違う速さで横へ流れ、水のように重なり合いながら移ろうようにしてください。ゆっくり、なめらかに。
各波はつなぎ目が見えないように途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。Background & Ambientのほかのモーション
Background Beams (背景ビーム)
別名 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
細く光る線が経路に沿って進み、ときには面にぶつかって弾けます。
使いどころ
ヒーローの背景
[適用する場所]に背景ビーム(Background Beams)の効果を追加してください。ライトビーム(light beams)、背景ライン(background lines)とも呼ばれます。
薄い曲線の経路を背景に置き、その上を短く光る筋が一つずつ、落ち着いた一定のペースで進むようにしてください。
ビームはタイミングをずらして同時に動かないようにし、コンテンツの背後に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。マウスを乗せてください
Background Boxes (背景ボックス)
別名 Tile hover background
斜めに傾いたタイルのグリッドが、ポインターが通るたびに色づいて光ります。
使いどころ
ヒーローの背景
[適用する場所]に背景ボックス(Background Boxes)のエフェクトを追加してください。タイルホバー背景(tile hover background)とも呼ばれます。
エリアを斜めに傾いたタイルのグリッドで埋め、ポインターが通ったタイルはすぐに光ってからゆっくり元に戻り、短い軌跡が残るようにしてください。
タイルはコンテンツの背後に置いてクリックを妨げないようにし、タッチデバイスではタップしたタイルを光らせてください。A
Border Beam (ボーダービーム)
別名 Shine border, Animated border, Glowing effect, Moving Border
明るいハイライトがカードの枠線に沿って周回します。
使いどころ
注目カード、CTA
[適用する場所]にボーダービーム(Border Beam)のエフェクトを追加してください。シャインボーダー(shine border)、ムービングボーダー(moving border)とも呼ばれます。
短く明るいハイライトがカードの枠線に沿って一定のゆったりした速さで周回し、つなぎ目が見えないようにループさせてください。
エフェクトでカードの内容やサイズが変わらないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はビームを止めてください。