Build a Premium Animated Website with ChatGPT and Codex

You can use ChatGPT with Codex to create professional websites using Next.js, Framer Motion, GSAP, Three.js, and parallax effects.

This guide gives you a complete step-by-step process and a master prompt you can copy and use.

What You Will Build

The final website should include:

• Next.js
• TypeScript
• Tailwind CSS
• Framer Motion animations
• GSAP scroll animations
• Three.js 3D elements
• Smooth parallax effects
• Responsive mobile design
• Modern typography
• SEO optimization
• Reusable components
• Clean production-ready code

---

Step 1: Decide What Website You Want

Before using the prompt, define the website clearly.

Write down:

• Business or project name
• Type of website
• Target audience
• Main service or product
• Preferred visual style
• Main call to action
• Required pages
• Brand colors
• Examples of websites you like

Example:

I want a premium website for a digital agency that builds websites for startups. The website should feel futuristic, minimal, dark, and interactive.

---

Step 2: Prepare Your Project

Create a new Next.js project.

npx create-next-app@latest my-website

Choose:

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes
• App Router: Yes
• src directory: Yes
• Import alias: Yes

Move into the project folder:

cd my-website

Install the required packages:

npm install framer-motion gsap three @react-three/fiber @react-three/drei lenis lucide-react

Optional packages:

npm install clsx tailwind-merge

---

Step 3: Open the Project in Codex

Open the project folder in your coding environment.

Give Codex access to the entire project so it can:

• Create components
• Edit files
• Install dependencies
• Fix errors
• Run the development server
• Test responsiveness
• Improve performance

Do not ask it to build everything in one uncontrolled step.

Ask it to:

1. Plan the website
2. Create the structure
3. Build each section
4. Add animations
5. Test the project
6. Fix errors
7. Improve performance

---

Step 4: Use This Master Prompt

Copy the following prompt and replace the information inside the brackets.

Master Website-Building Prompt

You are a senior creative developer, UI/UX designer, motion designer, and Next.js engineer.

Build a premium, modern, production-ready website for:

Business name: [INSERT BUSINESS NAME]

Business type: [INSERT BUSINESS TYPE]

Target audience: [INSERT TARGET AUDIENCE]

Main offer: [INSERT PRODUCT OR SERVICE]

Primary call to action: [INSERT CTA]

Visual style: [INSERT STYLE, FOR EXAMPLE: FUTURISTIC, MINIMAL, EDITORIAL, LUXURY, DARK, COLORFUL]

Preferred colors: [INSERT COLORS]

Required pages: [INSERT PAGES]

The website must use:

• Next.js with the App Router
• TypeScript
• Tailwind CSS
• Framer Motion
• GSAP with ScrollTrigger
• Three.js
• React Three Fiber
• React Three Drei
• Smooth scrolling
• Parallax effects
• Reusable React components
• Responsive design
• Accessible HTML
• SEO-friendly structure

Main Objective

Create a website that feels custom-designed, visually impressive, fast, responsive, and suitable for a real paying client.

Do not create a generic template.

The design should have a strong visual identity, excellent typography, intentional spacing, smooth transitions, premium interactions, and clear conversion-focused content.

Website Structure

Create the following sections:

1. Navigation bar
2. Hero section
3. Client or social-proof section
4. Services section
5. Featured projects or portfolio section
6. Process section
7. Benefits section
8. Interactive Three.js section
9. Testimonials section
10. Pricing or offer section
11. Frequently asked questions
12. Final call-to-action section
13. Footer

Adjust the structure when necessary for the selected business.

Hero Section Requirements

The hero section should include:

• A powerful headline
• A clear supporting paragraph
• One primary call-to-action button
• One secondary call-to-action button
• A premium animated background
• An interactive Three.js visual
• Framer Motion entrance animations
• Subtle mouse-responsive movement
• A visual indicator encouraging users to scroll

The headline must communicate the main benefit immediately.

Avoid vague text such as:

• We create digital experiences
• We bring ideas to life
• Welcome to our website

Write specific, conversion-focused copy.

Framer Motion Requirements

Use Framer Motion for:

• Page transitions
• Text reveals
• Staggered entrance animations
• Button interactions
• Navigation animations
• Modal animations
• Mobile menu animations
• Section reveal animations
• Hover effects
• Small interface interactions

Create reusable motion variants where appropriate.

Animations should feel smooth and premium.

Avoid excessive bouncing, spinning, or distracting movement.

GSAP Requirements

Use GSAP and ScrollTrigger for:

• Scroll-based timeline animations
• Pinned sections
• Horizontal scrolling sections
• Large typography reveals
• Image masking animations
• Layered parallax effects
• Scroll-controlled transformations
• Project showcase transitions
• Section-to-section storytelling

Register GSAP plugins correctly.

Only run browser-dependent GSAP code on the client.

Create proper cleanup functions inside React effects to prevent duplicated animations and memory leaks.

Use GSAP context where appropriate.

Three.js Requirements

Use Three.js through React Three Fiber and Drei.

Create one meaningful 3D experience that supports the brand.

Possible concepts include:

• Floating abstract geometry
• Interactive particles
• A rotating product model
• A glowing orb
• A 3D network
• A distorted glass object
• A futuristic landscape
• An animated gradient sphere

The Three.js scene must:

• Respond subtly to mouse movement
• Work on desktop and mobile
• Use optimized geometry
• Use reasonable lighting
• Avoid blocking the main content
• Include a fallback for low-powered devices
• Respect reduced-motion preferences
• Use lazy loading where possible

Do not create a heavy 3D scene that causes poor performance.

Parallax Requirements

Add smooth parallax effects to:

• Hero background layers
• Images
• Decorative elements
• Large typography
• Portfolio cards
• Three.js objects

Use different movement speeds to create depth.

The parallax effect must remain subtle and readable.

Disable or reduce it on smaller screens when necessary.

Smooth Scrolling

Use Lenis or another lightweight smooth-scroll solution.

Integrate it carefully with GSAP ScrollTrigger.

Make sure:

• Anchor links still work
• Keyboard navigation remains usable
• Scrolling works properly on mobile
• ScrollTrigger updates correctly
• Reduced-motion users receive a simpler experience

Design Requirements

Use a professional design system.

Define:

• Background colors
• Surface colors
• Primary color
• Accent color
• Text colors
• Border colors
• Font sizes
• Spacing scale
• Border radius
• Shadows
• Container widths

Use no more than two font families.

Use strong contrast and readable text.

The layout should feel spacious and intentional.

Avoid:

• Random gradients
• Excessive glassmorphism
• Too many floating cards
• Generic AI-generated copy
• Unnecessary animations
• Inconsistent spacing
• Oversized rounded corners everywhere

Responsive Design Requirements

The website must work properly on:

• Small mobile devices
• Large mobile devices
• Tablets
• Laptops
• Desktop screens
• Wide monitors

Test important breakpoints.

Do not simply shrink the desktop design.

Rearrange layouts thoughtfully for mobile.

Make sure:

• Text remains readable
• Buttons remain easy to tap
• Three.js content does not overflow
• Horizontal animations have mobile alternatives
• Navigation works correctly
• No section causes horizontal scrolling

Accessibility Requirements

Include:

• Semantic HTML
• Keyboard-accessible navigation
• Visible focus states
• Accessible button labels
• Image alt text
• Proper heading hierarchy
• Sufficient color contrast
• Reduced-motion support
• Descriptive form labels
• ARIA attributes only when necessary

Users with prefers-reduced-motion enabled should receive reduced or disabled animations.

SEO Requirements

Add:

• Page metadata
• Title and description
• Open Graph metadata
• Twitter card metadata
• Canonical configuration
• Structured page headings
• Semantic content sections
• Sitemap support
• Robots configuration
• Meaningful page descriptions

Write SEO-friendly copy without keyword stuffing.

Performance Requirements

Optimize for performance.

Use:

• Next.js Image
• Lazy loading
• Dynamic imports
• Code splitting
• Optimized fonts
• Lightweight animation logic
• Efficient Three.js geometry
• Reduced rendering on mobile
• Proper cleanup of event listeners
• Minimal unnecessary client components

Do not make the entire website a client component.

Keep components server-rendered unless browser APIs, animation libraries, or interaction require client-side rendering.

Code Quality Requirements

The code must be:

• Clean
• Modular
• Typed
• Reusable
• Easy to maintain
• Properly organized
• Free from obvious console errors
• Free from broken imports
• Free from placeholder functionality

Create a logical folder structure such as:

src/
  app/
  components/
    layout/
    sections/
    ui/
    motion/
    three/
  hooks/
  lib/
  data/
  styles/
  types/

Separate content data from layout components where practical.

Development Process

Do not immediately generate the whole project.

Follow this sequence:

Phase 1: Planning

First provide:

• Creative direction
• Website structure
• Color palette
• Typography recommendation
• Animation strategy
• Three.js concept
• Component structure
• File structure
• Performance strategy

Wait until the plan is clear before implementing.

Phase 2: Foundation

Create:

• Global styles
• Layout
• Design tokens
• Typography
• Navigation
• Footer
• Reusable buttons
• Reusable section wrappers
• Motion utilities

Phase 3: Main Sections

Build each section individually.

After each major section:

• Check responsiveness
• Check TypeScript
• Check imports
• Check accessibility
• Check animation performance

Phase 4: Advanced Motion

Add:

• Framer Motion interactions
• GSAP ScrollTrigger sequences
• Parallax effects
• Smooth scrolling
• Page transitions

Do not add motion before the layout works correctly.

Phase 5: Three.js

Add the optimized Three.js experience.

Dynamically import it when appropriate.

Add a static or lightweight fallback.

Phase 6: Quality Assurance

Run:

npm run lint
npm run build

Fix every important error.

Check for:

• Hydration errors
• Layout overflow
• Missing keys
• Broken imports
• Unused variables
• Animation cleanup problems
• Mobile navigation issues
• Slow Three.js rendering
• Accessibility problems

Phase 7: Final Review

Review the website like:

• A senior designer
• A senior frontend developer
• A potential customer
• A mobile user
• A performance auditor

Improve anything that feels generic, confusing, inconsistent, slow, or unfinished.

Final Output

At the end, provide:

1. A summary of what was created
2. The final folder structure
3. Installation instructions
4. Commands to run the project
5. A list of dependencies
6. Important customization locations
7. Deployment instructions
8. Any remaining limitations
9. Suggestions for future improvements

Begin with the planning phase.

Do not use placeholder text unless absolutely necessary.

Do not claim that the project is complete until the production build succeeds.

---

Step 5: Ask Codex to Build One Stage at a Time

After Codex gives you the plan, use these follow-up prompts.

Prompt 1: Build the Foundation

Implement the approved foundation.

Create the Next.js layout, global styles, typography, color system, navigation, footer, buttons, containers, section wrappers, and reusable animation utilities.

Keep the design responsive and accessible.

Do not add the advanced Three.js scene yet.

After implementation, run linting and fix all errors.

Prompt 2: Build the Main Sections

Build the hero, services, portfolio, process, testimonials, FAQ, final call-to-action, and footer sections.

Use real conversion-focused copy based on the business information.

Make the layout fully responsive before adding advanced scroll animations.

Check for horizontal overflow and mobile layout issues.

Prompt 3: Add Framer Motion

Add Framer Motion animations to the website.

Use it for text reveals, section entrances, staggered elements, buttons, cards, navigation, mobile menu transitions, and small interface interactions.

Create reusable variants.

Keep the animations subtle, consistent, and accessible.

Respect prefers-reduced-motion.

Prompt 4: Add GSAP and ScrollTrigger

Add GSAP and ScrollTrigger for advanced scroll-based animations.

Include:

• One pinned storytelling section
• One horizontal project showcase on desktop
• Typography reveal animations
• Image mask transitions
• Layered parallax movement
• Smooth section transitions

Provide simpler mobile alternatives.

Use proper GSAP cleanup and avoid hydration errors.

Prompt 5: Add Three.js

Create an optimized Three.js experience using React Three Fiber and Drei.

The scene should match the brand and support the hero section.

Add subtle pointer interaction, lighting, controlled animation, and responsive sizing.

Use dynamic imports and a lightweight fallback.

Reduce complexity on mobile and for users who prefer reduced motion.

Prompt 6: Add Parallax Effects

Add subtle parallax effects throughout the website.

Apply different scroll speeds to background elements, typography, images, decorative shapes, and selected Three.js objects.

Avoid affecting readability.

Reduce or disable expensive effects on mobile devices.

Prompt 7: Audit the Website

Perform a complete production audit.

Check:

• Next.js best practices
• TypeScript errors
• ESLint errors
• Production build
• Responsiveness
• Accessibility
• SEO
• Animation performance
• Three.js performance
• Hydration issues
• Horizontal overflow
• Broken links
• Missing metadata
• Mobile navigation
• Reduced-motion support

Fix all important issues you find.

Run:

npm run lint
npm run build

Do not stop until the build succeeds or clearly explain the exact blocker.

---

Step 6: Customize the Website

After the first version is complete, ask Codex to make specific improvements.

Useful prompts include:

Make It Look More Premium

Review the website as an award-winning creative director.

Improve the typography, spacing, visual hierarchy, composition, image treatment, motion timing, and section transitions.

Remove anything that looks generic or automatically generated.

Do not add more elements unless they improve the design.

Improve Mobile Design

Review the website only from a mobile-first perspective.

Fix typography, spacing, navigation, touch targets, card layouts, animation behavior, Three.js performance, and horizontal overflow.

Replace desktop-only effects with mobile-friendly alternatives.

Improve Performance

Audit the website for performance problems.

Reduce unnecessary client components, JavaScript, rerenders, large assets, heavy Three.js geometry, excessive animation listeners, and layout shifts.

Use lazy loading, dynamic imports, optimized images, and efficient animation cleanup.

Improve the Copy

Rewrite all website copy as a senior conversion copywriter.

Make the messaging specific, clear, believable, and focused on customer outcomes.

Remove vague claims, filler language, and generic AI-style phrases.

Keep the tone aligned with the brand.

---

Step 7: Test the Website

Before publishing, test the following:

• Desktop layout
• Mobile layout
• Tablet layout
• Navigation
• Buttons
• Forms
• Animations
• Smooth scrolling
• Parallax effects
• Three.js performance
• Reduced-motion mode
• Page speed
• SEO metadata
• Browser console
• Production build

Use these commands:

npm run lint
npm run build
npm run dev

Do not publish the website while major errors remain.

---

Step 8: Deploy the Website

The easiest deployment option for a Next.js website is usually Vercel.

Push the project to GitHub.

Then:

1. Log in to Vercel
2. Import the GitHub repository
3. Add environment variables when required
4. Deploy the project
5. Connect a custom domain
6. Test the live website on mobile and desktop

---

Important Advice

AI can generate impressive code, but you should still review the result.

Always check:

• Whether the website solves a real business problem
• Whether the copy is accurate
• Whether the forms work
• Whether the animations are smooth
• Whether the website performs well on mobile
• Whether licensed images and assets can legally be used
• Whether client information is correct
• Whether the production build succeeds

The value is not simply knowing how to generate a website.

The real value is understanding the customer, directing the AI properly, improving the result, and delivering a website that helps the customer get more leads or sales.

---

Found this useful? Follow @kabeeahmad.ka for more AI tools, prompts, and founder playbooks.