Glare / Holographic Card (グレア/ホログラフィックカード)
別名 Glare hover, Glare card, Magic card, Glare
明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。
使いどころ
プレミアムカード、コレクションカード
バリエーション
- Glare Card
- Glare Hover
- glare option in vanilla-tilt
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。似ているモーション
A
ポインターを動かしてください
Card Spotlight (カードスポットライト)
別名 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
やわらかな放射状の光がポインターを追ってカードの表面を移動し、下の背景を浮かび上がらせます。
使いどころ
機能紹介カード、ベントーグリッド
[適用する場所]にカードスポットライト(Card Spotlight)のエフェクトを追加してください。スポットライトホバー(spotlight hover)、ポインターグロー(pointer glow)、マウス追従グロー(mouse-following glow)、ラジアルグラデーションホバー(radial gradient hover)とも呼ばれます。
やわらかくほのかな放射状の光がポインターを追ってカードの表面を移動し、ポインターが入ったらフェードイン、離れたらフェードアウトするようにしてください。
文字が読みやすいよう光はカードの内容の背後に置き、タッチデバイスではカードを光らせないでください。ABCDEF
マウスを乗せてください
Holographic Text (ホログラフィックテキスト)
別名 Holographic Foil Text
テキストに虹色のホログラム箔のような反射が現れ、ポインターや時間に合わせて移ろいます。
使いどころ
プレミアム感のあるカード
[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。A
ポインターを動かしてください
3D Tilt (3Dチルト)
別名 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
カードがポインターの方向へ立体的に傾き、重なった中身が表面から浮き上がります。
使いどころ
製品カード、料金カード
[適用する場所]に3Dチルト(3D Tilt)エフェクトを追加してください。パースペクティブチルト(perspective tilt)、チルトカード(tilt card)とも呼ばれます。
ポインターの動きに合わせてカードがその方向へ立体的に傾き、内側のレイヤーがそれぞれ違う深さで表面から浮き上がり、ポインターが離れたらなめらかに平らへ戻るようにしてください。なめらかで控えめに。
文字が読みやすいよう傾きは小さくし、タッチ端末とユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はカードを平らなままにしてください。A
マウスを乗せてください
Shine Sweep (シャインスイープ)
別名 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
ホバーすると、斜めの光の帯が要素の端から端へ横切ります。
使いどころ
ボタン、カード、バッジ
[適用する場所]にシャインスイープ(Shine Sweep)のホバーエフェクトを追加してください。sheen、シャイニーボタン(shiny button)、シャインオンホバー(shine on hover)、グリント(glint)、シマー(shimmer)、シマーボタン(shimmer button)とも呼ばれます。
ポインターが乗っている間、やわらかな斜めの光の帯が要素を左から右へ横切り、短い間を置いて繰り返すようにしてください。
光の帯は要素の内側で切り取り、ポインターが離れたら止め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。3D & Depthのほかのモーション
ABCDEF
クリックしてください
3D Carousel (3Dカルーセル)
別名 Rotating ring carousel
リング状に並んだパネルが3D空間で縦軸を中心に回転します。
使いどころ
ギャラリー、製品ショーケース
[適用する場所]に3Dカルーセル(3D Carousel)を追加してください。回転リングカルーセル(rotating ring carousel)とも呼ばれます。
パネルを遠近感のあるリング状に並べ、「次へ」を押すたびにリング全体が縦軸を中心になめらかに回って次のパネルが正面に来るようにしてください。
操作はキーボードでも行えるようにし、現在のパネルをスクリーンリーダーに伝え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。3D Globe (3Dグローブ)
別名 Interactive globe
マーカーや弧を載せた3Dの地球が、レイアウトの中で回転します。
使いどころ
グローバル展開を示すビジュアル
[適用する場所]に3Dグローブ(3D Globe)を追加してください。インタラクティブグローブ(interactive globe)とも呼ばれます。
表面にいくつかのマーカーを置いた地球儀が、マーカーごと軸を中心にゆっくり一定の速さで回るようにしてください。穏やかに、途切れなく。
装飾として扱い、示している情報にはテキストの代替を用意し、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。A
マウスを乗せてください
3D Pin (3Dピン)
別名 Pin hover 3D
ホバーするとカードが奥へ傾き、ピンと光がこちらへ浮かび上がります。
使いどころ
リンクプレビューカード
[適用する場所]に3Dピン(3D Pin)のホバーエフェクトを追加してください。ピンホバー3D(pin hover 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが奥へ傾き、根元にやわらかな光のあるピンが中央から浮かび上がるようにし、離れたらすべて元に戻してください。なめらかに、弾まずに。
レイアウト上のカードの占める領域は変えず、キーボードフォーカスでも同じ効果を出してください。