ShowMotion

Background & Ambient

Background Beams (背景ビーム)

別名 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines

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

使いどころ

ヒーローの背景

バリエーション

  • SVG path beams
  • beams with collision
  • background lines
  • drawing paths
  • scroll-driven paths (Gemini effect)

デモのソースを見る

プロンプト

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

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

似ているモーション

Meteors (メテオ)

別名 Meteor shower, Shooting Stars

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

使いどころ

カードやヒーローのアクセント

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

別名 Connecting beam

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

使いどころ

連携図、データフロー図

Light Rays (ライトレイ)

別名 God rays, Light shafts

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

使いどころ

雰囲気のあるヘッダー

Background Boxes (背景ボックス)

別名 Tile hover background

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

使いどころ

ヒーローの背景

Border Beam (ボーダービーム)

別名 Shine border, Animated border, Glowing effect, Moving Border

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

使いどころ

注目カード、CTA

Dot Pattern Glow (ドットパターングロー)

別名 Dotted glow background, Dot grid

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

使いどころ

控えめなセクション背景

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