発光クラゲが泳ぐ3DランディングページをNext.jsとThree.jsで
GPT-6 AstraがClaude Code経由で、WebGLの光るクラゲがガラス調UIの背後を漂うエージェンシーサイトを作りました。
Claude Code + Three.js(コードのみ)Wandy 2
精細な3Dモデルを作ろう
コードだけでは単純な形しか作れません。Wandy 2なら写真1枚から、同じシーンで使えるテクスチャ付き3Dモデルを作れます。
Wandy3Dによる制作ブリーフ
作者がプロンプトを公開していないため、この作品を再現する方法を私たちがまとめました。
Build a deep-sea themed agency landing page with an interactive 3D hero. Use Next.js and React, with Three.js rendering a large bioluminescent jellyfish in glowing purple and magenta that drifts and pulses in a dark navy water scene, with soft particles and light scattering. Overlay a dark glassmorphism interface in Tailwind CSS: a rounded navigation bar, a big two-line headline on the left, a primary call-to-action button, two white stat cards, a small side card with a jellyfish thumbnail and a budget figure, social icons and a short agency description at the bottom. Add scroll choreography and small hover micro-interactions with Framer Motion. The jellyfish should react gently to pointer movement and keep animating when idle. Keep text readable over the 3D layer and make the layout responsive. Done means a running project where the jellyfish moves smoothly behind the interface at a steady frame rate.
このプロンプトの使い方
新しいNext.jsプロジェクトのClaude Codeで、GPT-6 Astraにビルドブリーフを渡します。
クラゲを自分のキャラクターや製品に替え、配色と見出しを変更します。
実行してFPSとモバイル表示を確認し、スクロール演出やポインタ反応の追加を依頼します。
元の投稿作者の方ですか? このページの修正・削除をご依頼ください
似ているプロンプト
すべてのプロンプトを見る
Claude Opus 5.5輪ゴムスイカ実験を再現した、弾ける3Dブラウザおもちゃ
林悦己Cheer
Claude Opus 5.5マグマだまりを備えたインタラクティブ3D火山断面シミュレーション
Konstantin Saifoulline
Claude Opus 5.5WebGPUのゼリープレス:油圧プレスで潰れて弾けるフルーツゼリー
Vib3Coded
Claude Opus 5.5WebGPUで動くジェリープレス玩具:果物グミを潰して投げる
Vib3Coded
Claude Opus 5.5スクロールで分解される機械式腕時計、WebGPUの単一HTML
Paruchh
Claude Opus 5.5地球儀・探検・内部断面を備えた単一ファイルのSVGインタラクティブ地球アトラス
Gadgetify
