Immersive SaaS landing pages with React Three Fiber, Drei helpers, and postprocessing effects
React Three Fiber SaaS Landing is the AI prompt framework for React developers who want to build the kind of immersive, GPU-accelerated SaaS landing pages that Linear, Vercel, and Stripe use to convert visitors. Built entirely around the R3F ecosystem — @react-three/fiber, @react-three/drei, @react-three/postprocessing, and Leva — every prompt produces idiomatic React component code, not imperative Three.js scripts. The framework covers the full R3F architecture: Canvas setup with Suspense boundaries, Drei helper components, postprocessing effect pipelines, spring-physics animations, HTML/3D hybrid layouts, and the demand-mode rendering that keeps SaaS landing pages fast.
Full Access Unlocked
All 46 prompts · All 6 modules
"The MeshTransmissionMaterial hero prompt produced a glass orb effect that our CEO said "looks like L..."
Design Engineer · Series A SaaS startup
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
6 modules · 46 prompts · 6 workflow stages
Canvas & Scene Setup
R3F Canvas with gl props, camera config, Suspense + fallback, ErrorBoundary, and PerformanceMonitor adaptive quality
8 promptsDrei Components
Environment presets, Float animation, MeshTransmissionMaterial, Text3D with font loading, OrbitControls, and ContactShadows
9 promptsPostprocessing Pipeline
EffectComposer setup, Bloom with luminance threshold, ChromaticAberration on hover, DepthOfField focus animation, and Vignette
8 promptsAnimation & Physics
useFrame delta-time patterns, react-spring/three useSpring for 3D transforms, scroll-driven animation with @react-three/drei's ScrollControls
9 promptsHTML/3D Hybrid
Drei Html component for DOM overlays in 3D space, occlude prop for depth-correct hiding, and mixing Tailwind UI with 3D scenes
6 promptsPerformance & DX
frameloop demand mode, invalidate() patterns, Leva debug panel, useThree selector pattern, and R3F DevTools integration
6 promptsWrite a React Three Fiber hero scene component for a SaaS landing page. Requirements: (1) Canvas: frameloop="demand", dpr={[1, 2]}, gl={{ antialias: true, alpha: false }}, camera={{ fov: 35, position: [0, 0, 6] }}. Wrap in Suspense with a styled loading fallback. (2) Scene contents: a central abstract mesh (IcosahedronGeometry, radius 1.5, detail 4) with MeshTransmissionMaterial — set thickness: 0.5, roughness: 0, transmission: 1, ior: 1.5, chromaticAberration: 0.05, backside: true. Wrap in <Float speed={1.5} rotationIntensity={0.4} floatIntensity={0.6}>. Add Environment preset="city". (3) Animation: useFrame to slowly rotate the mesh on Y axis at 0.15 rad/s. On pointer enter, use react-spring/three to spring the scale to 1.15 with config { tension: 200, friction: 20 }. On pointer leave, spring back to 1. (4) Postprocessing: EffectComposer with Bloom (luminanceThreshold: 0.2, intensity: 0.8, mipmapBlur: true) and Vignette (offset: 0.3, darkness: 0.7). (5) Export as HeroScene React component. Use TypeScript. Import all from @react-three/fiber, @react-three/drei, @react-three/postprocessing, and @react-spring/three.
Write a React Three Fiber component using @react-three/drei ScrollControls to create a vertical scroll-driven feature showcase for a SaaS product. Requirements: (1) ScrollControls: pages={4}, damping={0.15}. Inside, use useScroll() to get scroll offset. (2) Three feature panels at scroll offsets 0.25, 0.5, and 0.75. Each panel: a 3D icon mesh (BoxGeometry, SphereGeometry, TorusGeometry respectively) with MeshStandardMaterial in brand colors, plus a Drei Html overlay with a feature title and description (Tailwind-styled). (3) Camera animation: useFrame reads scroll.offset, lerps camera.position.z from 8 → 4 as user scrolls from 0 → 1. (4) Each feature mesh: when its scroll range is active (within ±0.1 of its offset), spring-animate scale from 0.8 → 1.2 using react-spring/three. (5) Add ContactShadows below each mesh. (6) The Html overlays should use occlude={[meshRef]} so they hide behind other 3D objects correctly. Full TypeScript. Explain the useScroll offset math for each panel.
system
17 prompts
templates
9 prompts
workflow
14 prompts
prompts
6 prompts
"The MeshTransmissionMaterial hero prompt produced a glass orb effect that our CEO said "looks like Linear's website" — on the first generation. The spring-on-hover interaction pattern is exactly what makes 3D feel alive, not just decorative."
Design Engineer
Series A SaaS startup
"The ScrollControls feature showcase prompt is our new standard template for SaaS landing pages. The useScroll offset math explanation — understanding how to map scroll position to 3D state — is what junior devs always struggle with."
Frontend Lead
Creative agency, 40+ SaaS clients
All 46 prompts across 6 modules are unlocked for your account.
Lifetime access