Prompt-engineer cinematic, physics-driven web animations using GSAP, Three.js & Framer Motion
Animated Web Experience is the definitive AI prompt framework for developers and designers who want to build visually stunning, animation-heavy websites. It covers the full animation stack: GSAP ScrollTrigger for scroll-driven storytelling, Three.js for 3D product viewers and particle fields, Framer Motion for React component animations, and raw Canvas API for physics simulations like animated race cars, particle explosions, and fluid dynamics. Every prompt includes the exact npm dependencies, component architecture, and performance constraints needed to ship production-ready animated experiences.
Full Access Unlocked
All 52 prompts · All 6 modules
"The Three.js particle hero prompt produced production-ready code in one shot. We shipped an award-wi..."
Alex P. · Creative Director, Digital Agency
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 · 52 prompts · 6 workflow stages
GSAP ScrollTrigger System
Prompt sequences for scroll-driven animations: pinned sections, parallax layers, text reveals, counter animations, and timeline scrubbing. Includes React integration patterns.
12 promptsThree.js 3D Experience
Complete Three.js scene architecture prompts: product viewer with orbit controls, particle field with neural connections, environment lighting, and GLTF model loading system.
11 promptsFramer Motion Component Library
15 reusable animated React components: page transitions, staggered list reveals, spring-physics cards, gesture-driven drawers, and magnetic button effects.
15 promptsCanvas Physics Engine
Raw Canvas API prompts for physics simulations: animated race cars with collision detection, particle explosions, fluid dynamics, and neural network connection lines.
8 promptsSVG Animation Library
SVG path drawing animations, shape morphing, icon animation sequences, and animated logo reveals. Includes CSS @keyframes and SMIL animation patterns.
4 promptsPerformance & Optimization
GPU compositing audit prompts, will-change optimization, requestAnimationFrame patterns, lazy-loaded Three.js scenes, and Lighthouse animation performance checklist.
2 promptsWrite a complete React component using the HTML5 Canvas API that renders an animated race track with 4 cars. Requirements: 1) Oval track with lane markings and pit lane, 2) Cars as colored rectangles with motion blur trail effect, 3) Physics: each car has a base speed + random variance, cars accelerate on straights and brake on corners, 4) Lap counter per car, 5) Leader board overlay (top-right), 6) Start/pause/reset controls, 7) 60fps using requestAnimationFrame, 8) Responsive canvas that fills its container. Use TypeScript. Include all npm dependencies needed. No external libraries — pure Canvas API only.
Write a complete React + Three.js component for a hero section particle field. Requirements: 1) 2000 particles in a sphere formation, 2) Particles connect with lines when within 80px distance, 3) Mouse movement causes nearest 200 particles to repel, 4) Slow rotation of entire field on Y axis, 5) Particles are cyan (#00E5FF) with 0.6 opacity, lines are white at 0.1 opacity, 6) Background is #0A0F1A, 7) Responsive — fills viewport, 8) Cleanup on unmount. Include: npm install three @types/three. Use TypeScript with proper Three.js types.
Write a React hook called useScrollReveal that uses GSAP ScrollTrigger to animate elements into view. Requirements: 1) Accepts a ref and options (direction: up/down/left/right, distance: number, duration: number, delay: number, stagger: number for child elements), 2) Elements start invisible and translate from the specified direction, 3) Animation triggers when element is 20% in viewport, 4) Supports staggered children via a data-stagger attribute, 5) Cleans up ScrollTrigger instances on unmount, 6) Works with SSR (no window errors). Include: npm install gsap. TypeScript.
prompts
16 prompts
architecture
11 prompts
templates
15 prompts
system
8 prompts
workflow
2 prompts
"The Three.js particle hero prompt produced production-ready code in one shot. We shipped an award-winning site in 3 weeks using this framework as our animation bible."
Alex P.
Creative Director, Digital Agency
"The Canvas race car prompt is insane — fully working physics simulation with lap counters in a single prompt. Used it for a motorsport client's interactive homepage."
Jamie L.
Frontend Engineer
All 52 prompts across 6 modules are unlocked for your account.
Lifetime access