アニメーションセクションを備えたラグジュアリースマートウォッチ Three.js ランディングページ
Gemini 3 Pro を使用して、Three.js、Anime.js、Tailwind で豪華なスマートウォッチのランディングページを構築し、その後、高度なアニメーションとインタラクションを備えた複数セクションのスクロールサイトに改良するための、詳細な多段階プロンプトシーケンス。
プロンプト
Three.js、Anime.js、Tailwind を使用して、高級スマートウォッチ ページの HTML ファイルを 1 つ作成してください。3D の 時計 モデル、ベージュの時計 を表示する丸い穴のある暗いテクスチャのオーバーレイを作成し、ページ読み込み時にヘッダーと大きな数字がスライドインするようにアニメーション化してください。
ページをよりプロフェッショナルにしてください。静的な穴を、読み込み時に開くアイリスに置き換えてください。時計の文字盤 の上に反射のあるガラスドームを追加し、金属素材を改善し、マウスの視差効果を追加してカーソルに合わせて 時計 が回転するようにし、時計の文字盤 に時刻とフィットネスリングを描画してください。
単一の画面をマルチセクションスクロールサイトに変換してください。ユーザーがスクロールすると、3D の 時計 が各セクションに合わせて移動および回転するようにアニメーション化してください。テキストがそれらの上をスクロールする間、3D キャンバスと背景は固定されたままにし、時計 のみが移動するようにしてください。
- 固定キャンバス: キャンバスを配置する
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
Gemini 3 Pro に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の web ページ プロンプトがあり、すべて自由にコピーして使えます。
ほかの web ページ プロンプトを見るGemini 3 Pro の他のプロンプト
ネオブルータリズム ウェブページ生成プロンプト
@Dorksense
ダウンロードボタン付きのシンプルな SVG アイコンを 40 個生成
@KAWAI
Mediapipe と Three.js を使ったレーザーアイエフェクトの Web デモ
@愚瞳 | winterx
React で作られた、ハイエンドなスイススタイル ランディング ページ ジェネレーター
@チャエン | デジライズ CEO《重要AIニュースを毎日最速で発信⚡️》
Gemini の CapCut のような動画エディター UI
@padphone
画像からの Voxel アート Three.js シーン生成プロンプト
@Ian Goodfellow
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。