ShowMotion

Background & Ambient

Wave Background (ウェーブ背景)

別名 Wavy background, Animated waves

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

使いどころ

セクションの区切り、ヒーローの下端

バリエーション

  • SVG layered waves
  • canvas noise waves

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

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

似ているモーション

Aurora Background (オーロラ背景)

別名 Northern lights gradient

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

使いどころ

ヒーローセクション

Animated Beam (ビームアニメーション)

別名 Connecting beam

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

使いどころ

連携図、データフロー図

Animated Gradient (グラデーションアニメーション)

別名 Gradient animation, Moving gradient, Background gradient animation

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

使いどころ

ヒーローの背景、ボタン

Animated Grid Pattern (グリッドパターンアニメーション)

別名 Flickering grid, Grid background

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

使いどころ

テック系・SaaS のヒーロー

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。