Animated Gradient (グラデーションアニメーション)
別名 Gradient animation, Moving gradient, Background gradient animation
グラデーション背景の色がゆっくり移り変わったり、流れたり、回転したりします。
使いどころ
ヒーローの背景、ボタン
バリエーション
- shifting position
- rotating angle
- blobs moving
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にグラデーションアニメーション(Animated Gradient)の背景を追加してください。ムービンググラデーション(moving gradient)、gradient animation とも呼ばれます。
グラデーションの色がエリア全体をゆっくり流れるように、やわらかく途切れず漂わせ、ループが戻るときに跳ねが見えないようにしてください。
上に載るテキストはどの色の上でも読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。