プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にフリッカー(Flicker)のエフェクトを追加してください。flickering とも呼ばれます。
要素はほとんどの時間は安定させ、切れかけたネオンのように短く不規則に途切れて暗くなるようにしてください。
タイミングは等間隔ではなく不規則にし、最大の明るさでの速い点滅は避け、モーションを減らす設定にしているユーザーには止めてください。似ているモーション
ABCD
要素が故障したネオンサインのように素早く明滅してから、点灯したままになります。
使いどころ
ネオン風・レトロ風のテキスト演出
[適用する場所]にフリッカーイン(Flicker In)の登場アニメーションを追加してください。
故障したネオンサインのように、要素が不規則な間隔で何度か点いたり消えたりしてから、点灯したままになるようにしてください。くっきりした明滅で、位置は動かしません。
再生は一度だけにし、光の点滅に敏感な人にも安全なよう明滅の回数は少なく、速すぎないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は点灯した状態で表示してください。Flash (フラッシュ)
別名 Blink
要素が不透明度をすばやく切り替えて点滅します。
使いどころ
新着コンテンツの通知
[適用する場所]にフラッシュ(Flash)の注目エフェクトを追加してください。ブリンク(blink)とも呼ばれます。
要素がすばやく消えては現れる点滅を2回行い、その後は完全に表示されたままにしてください。
延々と点滅させず一度だけ再生し、速い点滅は不快に感じられることがあるため、モーションを減らす設定にしているユーザーには再生しないでください。ABCDEF
Neon Glow Text (ネオングローテキスト)
別名 Neon Sign Flicker, Glowing Text
テキストがネオン管のように光り、ちらついたり脈打ったりします。
使いどころ
ナイトライフやゲーム系のテーマ
[適用する場所]にネオングローテキスト(Neon Glow Text)のエフェクトを追加してください。ネオンサインフリッカー(neon sign flicker)、グローイングテキスト(glowing text)とも呼ばれます。
テキストがネオン管のように柔らかく安定した光で輝き、ときどき本物の看板のように一瞬消えるようにしてください。
速い点滅は一部のユーザーに害を与えることがあるので、ちらつきは速くせずたまに起こる程度にし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を一定に保ってください。ABCDEF
マウスを乗せてください
Glitch Text (グリッチテキスト)
別名 Text Glitch, RGB Split Glitch
テキストが壊れた信号のように、スライスのずれや赤とシアンの色ずれを伴って震えます。
使いどころ
サイバーパンク風・ゲーム系の見出し
[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。Emphasisのほかのモーション
A
Head Shake (ヘッドシェイク)
別名 Headshake, No Shake
要素が少し回転しながら左右に揺れ、首を横に振って「いいえ」と伝えるように見えます。
使いどころ
無効な入力や拒否の表示
[適用する場所]にヘッドシェイク(Head Shake)のアテンション効果を追加してください。headshake、no shakeとも呼ばれます。
要素が首を横に振るように、少しひねりを加えながら素早く左右に向きを変え、振れ幅を少しずつ小さくして止まるようにしてください。
操作が拒否されたときなど、トリガーされるたびに一度だけ再生し、周りのレイアウトが動かないようにしてください。A
Heartbeat (ハートビート)
別名 Heart Beat
要素が鼓動する心臓のように、二拍ずつのリズムで拡大・縮小します。
使いどころ
いいね・お気に入りアイコン、ライブインジケーター
[適用する場所]にハートビート(Heartbeat)効果を追加してください。heart beatとも呼ばれます。
要素が素早く二度ふくらんでは戻り、次の鼓動の前に少し休むようにしてください。鼓動する心臓のような動きです。
鼓動の間の休みを保ったまま途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。A
Jello (ジェロ)
別名 Jelly
要素がゼリーのようにぷるぷると左右にゆがみ、揺れ幅がだんだん小さくなります。
使いどころ
ボタンやロゴの遊び心のある強調
[適用する場所]にジェロ(Jello)のアテンション効果を追加してください。ジェリー(jelly)とも呼ばれます。
要素がゼリーのようにぷるぷると左右にゆがみ、最初は大きく、すぐに落ち着いて止まるようにしてください。
トリガーされたら一度だけ再生し、要素が占める領域は変えずに周りのコンテンツがずれないようにしてください。