Lumen — Clarity, crystallized
P
プロンプト
Build an immersive 3D landing page hero for a premium SaaS product.
Tech stack: Next.js 15 + React Three Fiber + drei + Tailwind
Scene: floating frosted-glass crystalline shapes, subtle bloom post-processing,
depth-of-field focus on center
Interaction: mouse-tracking parallax camera (lerp smoothing), scroll-triggered
zoom-out into product UI reveal
Lighting: 3-point studio lighting, rim light in cyan (#00D4FF)
Palette: charcoal background (#0A0E1A), cyan accents, warm white text
Typography: Inter Display for headline (7xl), Inter for body
Mobile: degrade gracefully to static image + CSS transform
Performance: lazy-load R3F, keep scene under 50KB
CODE PREVIEW
プレビューを読み込み中…
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選