発光クラゲが泳ぐ3DランディングページをNext.jsとThree.jsで

GPT-6 AstraがClaude Code経由で、WebGLの光るクラゲがガラス調UIの背後を漂うエージェンシーサイトを作りました。

Claude Code + Three.js(コードのみ)Wandy 2
実際のモデル · 360°どちらも同じ写真から作成:左は Claude Code(Opus 5.5)が Three.js のコードでモデリングした、手を加えていない1回分の実行結果。右は 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.

このプロンプトの使い方

  1. 新しいNext.jsプロジェクトのClaude Codeで、GPT-6 Astraにビルドブリーフを渡します。

  2. クラゲを自分のキャラクターや製品に替え、配色と見出しを変更します。

  3. 実行してFPSとモバイル表示を確認し、スクロール演出やポインタ反応の追加を依頼します。

元の投稿作者の方ですか? このページの修正・削除をご依頼ください