What Makes Gemini 3.1 Different?
Here’s the thing about most AI tools right now. They’re great at generating text. They’re decent at generating images. But generating a functional, animated, responsive website with actual code?
That’s been hit or miss.
Gemini 3.1 changes the game because it understands execution. It’s not just spitting out HTML. It’s thinking about user experience. It’s thinking about how sections flow into each other. It’s adding animations that actually make sense.
And the craziest part?
You don’t have to hold its hand.
The One-Prompt Magic
I literally gave it:
- A brand name
- A color scheme
- One detailed prompt
That’s it. No back and forth. No “now add a contact section.” No “can you make the header sticky?”
It just… did it.
The website came out with smooth transitions, properly aligned sections, and animations that felt intentional. Not flashy just to be flashy. But purposeful.
Mobile Didn’t Get Left Behind
We’ve all been there. You build something beautiful on desktop, shrink the browser down, and everything breaks.
Images float off screen. Text overlaps. Buttons hide.
I was fully prepared for that moment when I switched to mobile view.
But nope.
Everything was aligned. Nothing was cut off. And here’s the part that actually impressed me – the animations still worked. Mobile users aren’t getting a stripped down version. They’re getting the full experience.
The Viral Prompt That’s Breaking Twitter
So here’s where it gets interesting.
This prompt I used? It’s currently going viral on Twitter for a reason. Developers, designers, founders – everyone’s testing it. Everyone’s posting their results.
And the results are wild.
People are building agency-quality websites in seconds. With different color schemes. With different brand voices. With content that actually makes sense for their business.
How To Customize It For Your Brand
The prompt is detailed. I’ll be honest, it’s long. But that’s why it works.
Here’s what you can change:
- Swap in your brand colors
- Add your actual business name
- Drop in your real content
- Adjust the vibe (professional, playful, luxury, etc.)
Everything else? The structure, the animations, the flow – it just works.
The Tech Stack Behind The Beauty
If you’re a developer or just curious, here’s what’s running under the hood:
- React for component structure
- Tailwind CSS for styling
- Custom animations that don’t slow things down
And because it’s real code, you can actually go in and tweak things manually if you want. Change a color. Adjust padding. Swap out an image.
But here’s the thing – you might not need to.
Step-By-Step: Build Your Own In Minutes
Okay, enough talk. You want to try this yourself. Here’s exactly how to do it.
Step 1: Get Antigravity
First things first. You need the tool that runs Gemini 3.1 Pro.
Head over to Antigravity and download it. Super straightforward. No weird signup hoops to jump through.
Step 2: Sign In With Google
Once you’ve got it open, you’ll see a button asking you to sign in. Use your Google account. Takes two seconds.
Step 3: Select The Right Model
Here’s where you need to pay attention.
You’ll see a dropdown with model options. You want Gemini 3.1 Pro.
I used the “Low” setting and it still blew me away. But if you want to really push it, try the “Pro High” setting. More compute usually means more polish.
Step 4: Grab The Viral Prompt
Here’s the part everyone asks about. The prompt.
I’ve linked it below, but here’s the gist – it’s comprehensive. It tells Gemini exactly what sections to build, what animations to use, how the flow should work, and what technologies to implement.
Copy the whole thing.
Step 5: Add Your Brand Details
Before you hit generate, take two minutes to personalize:
- Replace the placeholder brand name with yours
- Swap in your actual color scheme
- Add your brand voice and values
- If you have specific content, drop it in
The more context you give it, the better the output.
Step 6: Generate And Watch The Magic
Hit that generate button and just watch.
In seconds, you’ll have a full React + Tailwind website with animations, transitions, and mobile responsiveness already baked in.
Step 7: Export And Tweak
Once it’s done, you can look under the hood. All the components are there, nicely organized. If you know React, you can jump in and make adjustments.
If you don’t know code? You probably don’t need to. The site is ready to go.
What This Means For Web Designers
Okay, let’s address the elephant in the room.
Is this the end for web designers?
Honestly? No. But it’s definitely the end for web designers who refuse to adapt.
Here’s my take after sitting with this for a while:
The boring stuff dies. Building basic business websites from scratch? That’s going away. And honestly, good riddance. That work was always tedious anyway.
The creative stuff thrives. Strategy, brand voice, user psychology, custom illustrations, complex functionality – that’s still very much a human game.
The hybrid wins. Designers who learn to prompt effectively? Who can take an AI-generated foundation and elevate it? Those people are going to clean up.
This tool doesn’t replace creativity. It removes friction.
My Honest Takeaway
I built that demo site in seconds. If I had coded it manually, we’re talking hours. Probably a full day with all the animation polish.
And here’s the thing – the AI version wasn’t just “good for AI.” It was genuinely good. Period.
The animations flowed. The sections made sense. The mobile view worked. The code was clean.
Is it going to replace every web design job tomorrow? No.
Is it going to change how we build websites forever? Absolutely.
The question isn’t whether AI can build websites. It clearly can.
The question is: What are you going to build with it?
Copy Prompt
# Cinematic Landing Page Builder
## Role
Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.
## Agent Flow — MUST FOLLOW
When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
### Questions (all in one AskUserQuestion call)
1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
---
## Aesthetic Presets
Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
### Preset A — "Organic Tech" (Clinical Boutique)
- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark)
- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`.
- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware.
- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)
### Preset B — "Midnight Luxe" (Dark Editorial)
- **Identity:** A private members' club meets a high-end watchmaker's atelier.
- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark)
- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors.
- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)
### Preset C — "Brutalist Signal" (Raw Precision)
- **Identity:** A control room for the future — no decoration, pure information density.
- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark)
- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`.
- **Image Mood:** concrete, brutalist architecture, raw materials, industrial.
- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)
### Preset D — "Vapor Clinic" (Neon Biotech)
- **Identity:** A genome sequencing lab inside a Tokyo nightclub.
- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark)
- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`.
- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy.
- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)
---
## Fixed Design System (NEVER CHANGE)
These rules apply to ALL presets. They are what make the output premium.
### Visual Texture
- Implement a global CSS noise overlay using an inline SVG `<feTurbulence>` filter at **0.05 opacity** to eliminate flat digital gradients.
- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere.
### Micro-Interactions
- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
- Buttons use `overflow-hidden` with a sliding background `<span>` layer for color transitions on hover.
- Links and interactive elements get a `translateY(-1px)` lift on hover.
### Animation Lifecycle
- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function.
- Default easing: `power3.out` for entrances, `power2.inOut` for morphs.
- Stagger value: `0.08` for text, `0.15` for cards/containers.
---
## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)
### A. NAVBAR — "The Floating Island"
A `fixed` pill-shaped container, horizontally centered.
- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger.
- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).
### B. HERO SECTION — "The Opening Shot"
- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`).
- **Layout:** Content pushed to the **bottom-left third** using flex + padding.
- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
- CTA button below the headline, using the accent color.
### C. FEATURES — "Interactive Functional Artifacts"
Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns:
**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels).
**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.
**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.
All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor.
### D. PHILOSOPHY — "The Manifesto"
- Full-width section with the **dark color** as background.
- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text.
- **Typography:** Two contrasting statements. Pattern:
- "Most [industry] focuses on: [common approach]." — neutral, smaller.
- "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.
### E. PROTOCOL — "Sticky Stacking Archive"
3 full-screen cards that stack on scroll.
- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`.
- **Each card gets a unique canvas/SVG animation:**
1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
2. A scanning horizontal laser-line moving across a grid of dots/cells.
3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`).
- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.
### F. MEMBERSHIP / PRICING
- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border.
- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.
### G. FOOTER
- Deep dark-colored background, `rounded-t-[4rem]`.
- Grid layout: Brand name + tagline, navigation columns, legal links.
- **"System Operational" status indicator** with a pulsing green dot and monospace label.
---
## Technical Requirements (NEVER CHANGE)
- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
- **Fonts:** Load via Google Fonts `<link>` tags in `index.html` based on the selected preset.
- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs.
- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities.
- **No placeholders.** Every card, every label, every animation must be fully implemented and functional.
- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.
---
## Build Sequence
After receiving answers to the 4 questions:
1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
4. Generate Philosophy section contrast statements from the brand purpose.
5. Generate Protocol steps from the brand's process/methodology.
6. Scaffold the project: `npm create vite@latest`, install deps, write all files.
7. Ensure every animation is wired, every interaction works, every image loads.
**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."
