連続変形するUIアニメーション
同じ図形がボタン、読み込み表示、プレーヤー、スライダー、グラフへ連続して変形します。白黒の配色とバネのような動きで、ループするUIアニメーションを組み立てます。
参考プロンプト
事例の意図をもとに編集した参考例です。自分のテーマに合わせて調整できます。作者の元投稿は出典欄をご覧ください。
“一つの図形が連続して変形するUIアニメーションをデザインしてください。ボタン、読み込み状態、音楽プレーヤー、スライダー、グラフを順に登場させ、控えめな白黒の配色とバネのような動きを使ってください。先に各状態とタイミングを設計してから、時間を指定して再生位置を移動できるアニメーションをコードで作り、終わりから始まりへ自然につながるループにしてください。”
創作結果
創作のヒントとして収録したコミュニティの事例です。
欲しい結果を伝えるだけ。複雑な部分はPagePopが処理します。
モデルの構文やパラメータ、制作ツールを知らなくても始められます。
モデルを自動選択
求める結果に合ったモデルとツールをPagePopが選びます。
必要な確認だけ
足りない情報は、プロンプトの書き直しではなく簡単な質問で補います。
完成物を納品
作り方の助言だけでなく、そのまま使える成果物を生成します。
自分の言葉で始めましょう
この実例を参考に自由に変更し、最適な制作方法はPagePopに任せてください。
その他の実際のプロンプト例
“Remotion と GSAP で小さなモーションデザイン実験室を作ってください。移動距離、文字組み、イージング、モーションブラー、予備動作、動きの余韻を個別に調整できるようにします。すべての状態を同じフレーム時刻で制御し、コマ送りで確認しやすい構成にしてください。”
“Three.js と SVG を組み合わせ、ユーモラスな3Dアニメーションを作ってください。服装の異なる4羽のペリカンが、浮遊するスポーツカーの上で1台の自転車に乗る場面を描きます。ペダルをこぐ動きと姿勢をそろえ、車体の噴射口と浮遊感が伝わるようにしてください。”
“参考動画は Sonnet 5.5 と Opus 5.5 の結果を明示したモデル比較です。自分向けのアレンジでは、Three.js を使い、単一の HTML ファイルにビー玉の音楽機械を作ってください。各音の時刻から逆算して玉を放し、衝突と発音を拍に合わせます。レール、接触位置、カメラ構図を分かりやすくしてください。”