How to Create a Website Using Google Antigravity

Understand the tool

What Is Google Antigravity?

Google Antigravity is an agentic software-development platform. Google describes it as more than an editor: it combines a familiar AI-powered coding experience with an agent-first interface that can plan, execute, and verify complex tasks across an editor, terminal, and browser.

The platform provides two main working surfaces:

• Editor View: A hands-on coding environment with project files, code editing, inline assistance, terminal access, and an agent side panel.
• Manager Surface: A higher-level interface for launching, observing, and coordinating agents across workspaces and longer-running tasks.

Antigravity also creates Artifacts. These are reviewable outputs such as implementation plans, task lists, screenshots, browser recordings, and summaries. An Artifact is easier to assess than a long stream of tool calls because it shows what the agent intended to build and what it believes it completed.

Antigravity is different from a drag-and-drop website builder. It works with a codebase, which gives you greater flexibility but also makes technical review more important. If you prefer Google’s browser-based generative app workflow, compare this tutorial with how to build a website with Google AI Studio. For a broader tool-independent process, read how to create a website with AI.

Reference walkthrough

Watch: Building an Animated Website with Google Antigravity

The video shows a fast visual-production workflow followed by an Antigravity build. Watch it once for the overall sequence, then use the expanded instructions below to reproduce the process with stronger performance, accessibility, security, and deployment practices.

Preparation

What You Need Before Creating the Website

A ten-minute AI build is possible only after the raw ingredients exist. Prepare the brand direction and assets before asking Antigravity to write the interface.

Choose a sensible technical scope

The reference project is essentially a cinematic one-page product website. A plain HTML, CSS, and JavaScript stack is appropriate because it is portable and easy to host. A framework such as Astro, React, or Next.js can make sense when the website needs reusable components, content collections, application state, authentication, or server features. Do not add a framework merely because an AI agent can install one.

Create a separate project workspace

Give Antigravity access only to the folder required for this project. Do not open your home directory, downloads archive, password exports, cloud credentials, or a drive containing unrelated client work. Agentic tools can edit files and execute commands; a narrow workspace reduces the consequences of a mistaken instruction.

Complete workflow

How to Create a Website Using Google Antigravity: Step by Step

Step 2: Write a Structured Website Brief

The video organizes the website description, variants, image paths, frame counts, and visual requirements in a document before opening Antigravity. That preparation is one of the most transferable lessons in the workflow.

Use headings and lists in your brief. Include an explicit “do not” list, such as: do not invent health claims, do not use random stock photography, do not add unnecessary dependencies, and do not hide essential copy inside a canvas.

Step 3: Generate Consistent Product Visuals

The reference video uses Google Whisk to generate product scenes around an uploaded can image. The key is consistency: the label, can proportions, flavor color, lighting, camera angle, and background should remain coherent between outputs.

A useful product-image prompt describes:

• The exact product orientation and camera angle.
• The background color and lighting direction.
• The ingredients or objects surrounding the product.
• The amount of empty space required for website copy.
• The desired realism, sharpness, and commercial-photography style.
• Elements that must remain unchanged, especially brand marks and package text.

Review generated labels carefully: AI image tools frequently distort logos, nutritional text, product names, and legal copy. Use an approved product render or photography for packaging that must be accurate. Never publish invented claims or a misleading product representation.

Step 4: Compose the Hero Scene

The video assembles the product, splash, fruit, and surrounding elements in Canva. This stage gives you control over composition before motion is added. Place the product where it can remain visible behind the website’s text and interface.

Build at the intended aspect ratio, ideally with extra space around important objects so responsive cropping has room to move. Test a 16:9 desktop crop and a tall mobile crop. Keep text out of the image whenever possible so the actual HTML can remain readable, responsive, accessible, and indexable.

Step 6: Convert the Video into a WebP Frame Sequence

This step prepares the animation for scroll-controlled playback. The website does not simply autoplay the original video. Instead, JavaScript selects a specific image frame according to the visitor’s scroll position and draws that frame on a canvas.

The reference workflow performs two separate operations:

1. Convert the MP4 into an animated WebP. The source clip is eight seconds long. At 30 frames per second, the resulting animated WebP contains 240 frames.
2. Extract the animated WebP into individual still frames. The converter’s Frames tool separates the animation so each frame can be loaded and controlled independently by the website.

Use these conversion settings as a starting point

• Dimensions: Reduce the 4K source to 1280×720 unless the website genuinely displays a larger animation.
• Frame rate: The video uses 30 FPS, producing 240 frames from an eight-second clip. A lower frame rate can reduce the download significantly if the motion still looks smooth.
• Quality: Start around 75 to 85 and compare the product label, splash edges, gradients, and dark background for visible artifacts.
• Loop count: Looping is not important after the frames are extracted because JavaScript controls the sequence.

Extract and rename the frames

After conversion, click Frames, save the extracted images, and place them in a dedicated folder. Use consistent, zero-padded names so JavaScript can generate every path reliably:

assets/sequence/passion-fruit/frame_0001.webp
assets/sequence/passion-fruit/frame_0002.webp
assets/sequence/passion-fruit/frame_0003.webp

Keep all extracted frames at identical dimensions and preserve their original order. If the export uses names such as frame_1.webp, rename them to a fixed-width pattern such as frame_0001.webp. This prevents incorrect alphabetical ordering, where frame_10.webp can appear before frame_2.webp.

Choose the format based on the effect: If you only need a self-playing background, keep an optimized MP4 or WebM and skip frame extraction. Extract individual frames only when you need precise scroll scrubbing, frame-by-frame interaction, or another effect that must jump directly to a specific moment.

animated-product-site/
├── index.html
├── styles.css
├── main.js
└── assets/
    ├── product/
    │   ├── passion-fruit.webp
    │   └── lemon.webp
    ├── sequence/
    │   ├── passion-fruit/
    │   └── lemon/
    └── poster/
        └── hero-fallback.webp

Step 8: Open the Project in Google Antigravity

Create a clean folder and open it in Antigravity. The Editor view will feel familiar if you have used a modern code editor. You can see the file explorer, source files, terminal, and agent interface in one workspace.

Before the first prompt:

• Initialize Git or make a backup.
• Confirm the agent cannot access unrelated directories.
• Place assets in their final folders.
• Decide whether the project should use plain web files or an existing framework.
• Open only the credentials needed for deployment after the website is ready, not during design generation.

Step 11: Let Antigravity Build and Inspect the Assets

Once approved, the agent can create the website files, connect the image paths, launch the site, and inspect it. The reference video shows Antigravity examining the supplied product visual while the brief remains available in the agent panel.

Stay involved. If the agent asks whether it should use a heavy library, modify a package file, or download a dependency, consider whether the benefit justifies the complexity. For a single scroll sequence, a small purpose-built JavaScript controller may be easier to maintain than a full animation framework.

Step 12: Review the Implementation Artifact

Google emphasizes Artifacts as a trust and review mechanism. In the video, the completed Artifact summarizes features such as the scroll-controlled hero, product variants, navigation, preloading, responsive layout, and page sections. It also includes a visual overview.

Use the Artifact as a checklist, not proof that everything is correct. Open the real site and verify every claim. Check buttons, links, product variants, scroll direction, animation reversal, fallback behavior, mobile layout, and page sections.

Copy and customize

Google Antigravity Animated Website Prompt Template

Replace the brackets with your own brand, copy, file paths, and acceptance criteria. Ask for a plan first, then approve implementation after reviewing it.

Create a production-ready, responsive one-page product website.

Project goal:
Build a premium landing page for [BRAND], a [PRODUCT CATEGORY] for
[TARGET AUDIENCE]. The primary conversion is [PRIMARY CTA].

Technical approach:
- Use [plain HTML, CSS, and JavaScript / existing framework].
- Do not install additional dependencies unless they are necessary.
- Keep content semantic, accessible, and indexable.
- Plan the implementation and show me the plan before editing files.

Visual direction:
- Dark editorial product aesthetic with high contrast.
- Bold sans-serif display typography and readable body copy.
- Product imagery is the main visual focus.
- Use restrained glass effects only where they improve navigation.
- Avoid generic gradients, excessive cards, and decorative clutter.

Page sections:
1. Sticky navigation with Product, Benefits, Ingredients, Reviews, FAQ, Contact.
2. Cinematic hero with headline, supporting text, primary CTA, secondary CTA.
3. Product variants with accessible controls and clear active state.
4. Benefits and ingredients using semantic headings and concise copy.
5. Product details or nutrition section.
6. Reviews with honest placeholder labels if real reviews are unavailable.
7. FAQ and final CTA.
8. Footer with contact, privacy, and social links.

Hero animation:
- Render the frame sequence on a canvas behind the HTML content.
- Source pattern: assets/sequence/[VARIANT]/frame_####.webp
- Total frames: [FRAME COUNT].
- Map scroll progress smoothly to frame index.
- Load a small critical set first, then progressively load the rest.
- Display assets/poster/hero-fallback.webp before frames are ready.
- Respect prefers-reduced-motion and keep the fallback visible.
- Never hide the H1, copy, or CTA inside canvas.

Responsive behavior:
- Test at 390x844, 768x1024, 1440x900, and 1920x1080.
- No horizontal overflow.
- Keep buttons at least 44 pixels high.
- Preserve readable contrast over every animation frame.

SEO and accessibility:
- Add a unique title, meta description, canonical placeholder,
  Open Graph tags, semantic landmarks, and one H1.
- Add descriptive alt text to meaningful images.
- Include visible keyboard focus and correct button/link semantics.
- Do not animate for users who prefer reduced motion.

Verification:
- Run the site locally.
- Test all navigation, controls, and CTAs.
- Confirm there are no console errors or missing assets.
- Test mobile and desktop layouts.
- Create an Artifact with the implementation summary,
  changed files, screenshots, and any remaining limitations.

Technical explanation

How to Create an Animated Website Using Google Antigravity

The visual centerpiece in the reference build is a scroll-driven image sequence. JavaScript watches the page’s scroll progress, converts that progress into a frame number, loads the corresponding WebP image, and draws it to a canvas.

The simplified relationship is:

progress = clamp(scrollPosition / animationDistance, 0, 1)
frameIndex = round(progress * (totalFrames - 1))
drawFrame(frameIndex)

The canvas should scale for the device pixel ratio without downloading larger source images than necessary. The code also needs to handle rapid scrolling, frame-loading gaps, viewport resizing, and reverse scrolling.

Use progressive frame loading

Loading 240 frames before showing the website creates a poor first visit, especially on mobile. A better strategy is:

1. Render the static poster immediately.
2. Load the first frame and a small group near the start.
3. Load evenly distributed key frames to make scrubbing usable quickly.
4. Fetch the remaining neighboring frames during idle time.
5. Prioritize the frames closest to the visitor’s current scroll position.

Provide a reduced-motion experience

Some visitors experience discomfort from large motion tied to scrolling. When the operating system requests reduced motion, replace the sequence with the poster, remove forced scroll distance, and ensure all content remains available.

@media (prefers-reduced-motion: reduce) {
  .hero-canvas {
    display: none;
  }

  .hero {
    background-image: url("/assets/poster/hero-fallback.webp");
  }
}

Do not let the canvas become the website

A canvas is a visual layer, not a substitute for semantic content. Headlines, paragraphs, links, buttons, prices, product details, and legal information should remain real DOM elements. This helps search engines, screen readers, translation tools, and visitors whose devices cannot render the effect smoothly.

Protect the user experience

Performance Optimization for an Animated Antigravity Website

Cinematic websites often look fast in a local demo and feel slow on an ordinary phone. Test with a cold cache and network throttling. The first page should become readable and usable without waiting for the entire animation.

Set a realistic performance budget

• Keep the initial HTML, critical CSS, and essential JavaScript small.
• Avoid preloading hundreds of image files in the document head.
• Serve appropriately sized images rather than full-resolution design exports.
• Use long-lived caching for fingerprinted frame assets.
• Defer analytics and nonessential third-party scripts.
• Use a system font or carefully subset and preload only required font files.
• Remove unused variants and duplicate frames from production.

Measure the correct things

Check Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift, total transfer size, request count, main-thread work, and memory use. An animation that reaches 60 frames per second after a 20 MB download is not a fast website.

Use video when scroll precision is unnecessary

If the hero only needs to loop automatically, an optimized WebM or MP4 may be substantially lighter than hundreds of individual frames. Ask Antigravity to implement both prototypes, measure them, and keep the simpler option when the experience is equally effective.

Make the site discoverable

SEO and Accessibility for a Google Antigravity Website

An impressive hero does not compensate for unclear content. Build the page around the search intent and user journey, then let motion support the message.

On-page SEO checklist

• Write a specific title and meta description for the product and audience.
• Use one descriptive H1, followed by logical H2 and H3 headings.
• Include useful product copy in HTML rather than baking it into images.
• Add a canonical URL after the production domain is known.
• Create an Open Graph image and social metadata.
• Add Product, Organization, or FAQ schema only when the visible content supports it.
• Use descriptive internal links and natural anchor text.
• Create a sitemap and robots file when the site has multiple public pages.
• Return real 404 status codes for missing pages.

Accessibility checklist

• Maintain sufficient text contrast over the lightest and darkest animation frames.
• Use actual buttons for actions and links for navigation.
• Make product variant controls keyboard accessible.
• Keep focus indicators visible.
• Do not rely on color alone to show an active flavor or selected state.
• Pause or remove nonessential animation for reduced-motion users.
• Give the canvas an appropriate accessible treatment while exposing equivalent text elsewhere.

After launch, use the detailed guide on how to add Google Analytics to an Astro site if your Antigravity project uses Astro. The same article also explains important GA4 principles such as production-only loading, consent, verification, and client-side navigation tracking.

Use agentic tools carefully

Google Antigravity Security and Permission Best Practices

An agent that can edit files, run terminal commands, and browse the web is more capable than a normal autocomplete tool. Treat its permissions with the same care you would give a developer working directly on your machine.

Keep secret values in server-side environment variables when the deployment architecture supports them. Anything delivered to browser JavaScript can be inspected by visitors. A static website should not contain privileged API credentials.

If your project later needs a continuously running AI assistant rather than a website-building environment, use a separate server and permission model. The guide to setting up Hermes Agent on a Hostinger VPS covers an always-on agent deployment, API configuration, Telegram access, and operational security.

Go live

How to Deploy a Google Antigravity Website on Hostinger

The reference video demonstrates deployment after the build. You can publish the finished Antigravity code on Hostinger using a workflow appropriate to the project type.

Option 1: Upload a static HTML website

1. Confirm the project works locally and starts from index.html.
2. Check that asset paths are relative or point to valid production URLs.
3. Create a ZIP containing the website files, not an extra parent folder.
4. Open Hostinger hPanel and the File Manager for your website.
5. Open public_html, upload the archive, and extract it there.
6. Confirm index.html sits directly inside public_html.
7. Connect the domain, enable SSL, and test the HTTPS version.

Option 2: Deploy a framework build

For Vite, Astro, React, or another static framework, run the production build first. Upload the contents of the generated output directory, commonly dist, to public_html. Do not upload only the source files and expect a browser to run the build process.

npm install
npm run build

Open the generated site locally or with a preview command before deployment. Verify that the build does not contain localhost URLs, development-only environment settings, or broken absolute paths.

Option 3: Use Git deployment

If your Hostinger plan supports Git deployment for the project type, push the reviewed code to a private or public repository, connect the repository in hPanel, choose the correct branch and deployment directory, and deploy. Keep secrets out of the repository and confirm whether the hosting workflow runs a build or expects already-built files.

Option 4: Use a VPS for a server application

A site with a Node server, database, authentication, background jobs, or private API integration needs a compatible application-hosting environment. A Hostinger VPS gives more control, but you are responsible for runtime installation, process management, a reverse proxy, SSL, updates, firewall rules, logs, and backups.

Post-deployment checks

• Test the root domain and www version.
• Confirm HTTPS redirects correctly.
• Check every animation asset in the Network panel.
• Verify caching and compression headers.
• Test the site on mobile data, not only broadband.
• Replace temporary canonical and social URLs with the live domain.
• Submit the sitemap to search engines if applicable.
• Install privacy-conscious analytics and verify real visits.

Troubleshooting

Common Google Antigravity Website Mistakes

Using a vague one-line prompt

A vague request produces generic design and invented details. Supply the real audience, offer, copy, assets, sections, interaction rules, and acceptance criteria.

Loading every animation frame before displaying content

This creates a long blank or preloader experience. Show a compressed poster immediately and progressively load the sequence.

Putting essential content inside the canvas

Canvas text is difficult for search engines and assistive technology to interpret. Keep all meaningful copy and controls in semantic HTML.

Ignoring mobile composition

A wide fruit splash may crop beautifully on desktop and hide the product on a phone. Create a mobile focal position, alternate crop, or separate optimized asset.

Approving every terminal command

Agent speed does not remove the need for review. Understand the command, confirm its working directory, and keep a reversible checkpoint.

Publishing AI-generated product claims

Do not allow the agent to invent health benefits, testimonials, nutrition data, warranties, pricing, or certifications. Replace placeholders with verified information.

Deploying source files instead of the production build

Framework projects commonly require a build. Upload the production output and test routes, assets, and environment configuration on the live domain.

Calling the design complete after one screenshot

A screenshot cannot prove keyboard access, working links, animation fallback, responsive behavior, performance, or error-free code. Test the actual site.

Questions answered

Frequently Asked Questions

Final recommendation

Is Google Antigravity Good for Building Websites?

Google Antigravity is especially useful when you want AI to work inside a real project instead of merely suggesting snippets. Its ability to plan, edit, run, browse, verify, and summarize can compress a large amount of routine frontend work.

The strongest results still come from human preparation. Bring a clear product story, distinctive assets, a detailed brief, realistic technical scope, and measurable acceptance criteria. Review the plan before implementation, keep permissions narrow, and treat every generated claim as something to verify.

For an animated product site, prioritize the experience before the spectacle. The page should load readable content immediately, preserve controls and SEO in HTML, respect reduced-motion preferences, and remain useful when the animation is unavailable. When the build passes those tests, publish it on a production host and measure how real visitors use it.