ShowMotion

Background & Ambient

Border Beam (ボーダービーム)

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

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

使いどころ

注目カード、CTA

バリエーション

  • border beam
  • shine border
  • glowing effect
  • Moving Border

デモのソースを見る

プロンプト

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

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

似ているモーション

Hover Border Gradient (ホバーボーダーグラデーション)

グラデーションの枠線が要素の周りを動き、ポインターを乗せると広がります。

使いどころ

ボタン、カード

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

別名 Connecting beam

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

使いどころ

連携図、データフロー図

Shine Sweep (シャインスイープ)

別名 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button

ホバーすると、斜めの光の帯が要素の端から端へ横切ります。

使いどころ

ボタン、カード、バッジ

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

別名 Dotted glow background, Dot grid

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

使いどころ

控えめなセクション背景

Lamp Effect (ランプエフェクト)

別名 Lamp glow

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

使いどころ

ダークなヒーロー見出し

Light Rays (ライトレイ)

別名 God rays, Light shafts

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

使いどころ

雰囲気のあるヘッダー

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