Lumen – Clarity, Crystallized | AI Prompt for Focus
CODE PREVIEW
Prompt
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
This prompt is a detailed technical blueprint for building a high-end, interactive 3D hero section for a premium SaaS landing page. It specifies the full stack — Next.js 15, React Three Fiber, Drei, and Tailwind CSS — along with precise scene composition: frosted-glass crystalline shapes, bloom post-processing, and depth-of-field effects. The lighting setup follows a professional 3-point studio model with a distinctive cyan rim light, while the dark charcoal palette and Inter Display typography give the result a polished, modern aesthetic.
This is ideal for frontend developers and creative engineers who need a ready-to-implement reference for immersive product marketing pages. The prompt covers mouse-tracking parallax, scroll-triggered animations, graceful mobile degradation, and strict performance constraints — making it practical for real production environments, not just prototypes. Whether you are launching a new SaaS product or refreshing an existing brand experience, this prompt provides a solid, opinionated foundation that balances visual ambition with technical discipline.
Prompt Overview
This prompt is a detailed technical blueprint for building a high-end, interactive 3D hero section for a premium SaaS landing page. It specifies the full stack — Next.js 15, React Three Fiber, Drei, and Tailwind CSS — along with precise scene composition: frosted-glass crystalline shapes, bloom post-processing, and depth-of-field effects. The lighting setup follows a professional 3-point studio model with a distinctive cyan rim light, while the dark charcoal palette and Inter Display typography give the result a polished, modern aesthetic.
This is ideal for frontend developers and creative engineers who need a ready-to-implement reference for immersive product marketing pages. The prompt covers mouse-tracking parallax, scroll-triggered animations, graceful mobile degradation, and strict performance constraints — making it practical for real production environments, not just prototypes. Whether you are launching a new SaaS product or refreshing an existing brand experience, this prompt provides a solid, opinionated foundation that balances visual ambition with technical discipline.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選