Video summary

I Built $10000 Website With Free AI Tools || No Code || Free Resources

Main summary

Key takeaways

Technology

Overview

This video tutorial shows how to build a fully interactive, animated VR-themed landing page without manual coding or design. It uses a pipeline of free/AI tools to generate assets/layouts, then integrates them into Antigravity IDE.

Overall Approach (No-Code AI Workflow)

  1. Use Pinterest as a visual reference source for each section’s layout and style.
  2. Use ChatGPT to generate images (e.g., hero/VR imagery).
  3. Use Google Flow to turn generated images into cinematic animations (video).
  4. Use Ezgif to convert animations into JPG frame sequences (image sequences) for scroll effects.
  5. Use Antigravity IDE to:
    • Create smooth scroll animations from frame sequences
    • Apply AI-generated layout SRC files onto sections
    • Combine layouts with video backgrounds
    • Provide localhost preview links
  6. Use Google AI Studio to generate layout/code structure from reference screenshots.
  7. Use Cloudinary to upload videos and obtain public URLs for responsive background video integration.

Section-by-Section Implementation Details

1) Hero Section + First Animation (VR “Box” Vibe)

Step 1: Generate the hero background visual

  • Collect inspiration from Pinterest VR images.
  • Feed the chosen image into ChatGPT image generation with a prompt to:
    • regenerate the image
    • remove text
    • extend it to fill the background
    • use a 16:9 aspect ratio

Step 2: Create a cinematic animation

  • Upload the image to Google Flow.
  • Prompt to generate a smooth, cinematic VR animation.
  • Download the resulting video.

Step 3: Convert the video into a frame sequence

  • Use Ezgif (video → JPG):
    • select a specific duration slice (e.g., 4 seconds) to avoid repetitive motion
    • set 30 FPS
    • generate JPG frames

Step 4: Create the scroll animation in Antigravity

  • Drag the JPG frames into Antigravity IDE.
  • Prompt: generate fluid, cinematic smooth scroll animation.
  • Use Antigravity’s local host preview link to verify it works.

2) Add Hero Content + Supporting UI (Chips/Cards)

Step 1: Generate the hero layout

  • Use Google AI Studio with a Pinterest reference banner screenshot.
  • Prompts include:
    • regenerate the hero layout
    • remove background visuals (keep plain black)
    • enforce typography style (mentions “Damien Sans”)
    • refine design (reduce navigation elements, cleaner right-side card, smaller headline width)
  • Run an iteration loop (re-prompt with improvements to spacing/alignment/clarity).

Step 2: Create the supporting chips section

  • Use a Pinterest chips layout reference:
    • screenshot → prompt → generate similar chips.

Step 3: Create the cards grid (8 cards)

  • Use a Pinterest cards reference:
    • prompt for clean/minimal cards
    • remove center image and background text
    • expand to 8 total cards: 4 left + 4 right

Step 4: Integrate into Antigravity

  • Download the AI Studio zip and extract the SRC folder.
  • Drag SRC into Antigravity.
  • Prompt to place the hero layout on top of the existing scroll animation while keeping motion smooth.
  • Note: AI may require multiple prompt iterations for best results.

3) Third Section: Second Immersive Scroll Animation + Content Layout

Step 1: Prepare another scroll animation

  • Start from the earlier VR video frame sequence.
  • Remove uninteresting/repetitive frames.

Step 2: Generate the third-section scroll

  • Drag the filtered frame folder into Antigravity.
  • Prompt: smooth, fluid, responsive scroll animation.
  • Ensure it appears after a plain black section.

Step 3: Create and place the section content layout

  • Use a Pinterest reference screenshot + Google AI Studio:
    • remove background visuals
    • minimal, futuristic layout
    • refine typography/spacing/cards
  • Download zip → extract SRC → Antigravity prompt:
    • implement into the third section
    • preserve animations seamlessly

4) Fourth Section: Video Background + Immersive Visual Section

Step 1: Generate a futuristic AR/VR person image

  • Use ChatGPT to create an image of a person wearing an AR/VR headset, facing forward.
  • Regenerate to 16:9 for consistency.

Step 2: Turn the image into video

  • Use Google Flow to generate video from the image.
  • Download the video.

Step 3: Host the video publicly

  • Upload to Cloudinary.
  • Copy the public video URL.

Step 4: Use the video URL in Antigravity

  • Prompt Antigravity to create a responsive video background blending into the section.

Step 5: Generate and integrate the section layout

  • Use Google AI Studio from Pinterest reference → download SRC.
  • Antigravity prompt implements layout for section four using the provided video background.

5) Footer Section (Animated Footer via Video Background)

  • Use Pinterest footer reference → screenshot.
  • Generate footer layout in Google AI Studio.
  • Use Google Flow to create a video from the reference image.
  • Upload to Cloudinary → get the video URL.
  • Antigravity combines:
    • footer layout + video URL
  • Result: footer animation is ready and matches the futuristic style.

Practical Notes Emphasized by the Creator

  • Fast iteration advantage: AI tools allow quick regeneration and design refinement.
  • Iteration is required: AI may not produce perfect results on the first try; the workflow encourages:
    • adjusting spacing, typography, alignment
    • improving animation timing/smoothness
    • asking Antigravity to find or fix issues
  • Selective frame use matters: trimming frame sequences reduces repetitive or undesirable motion during scroll interactions.

Tip: Slice your source footage and only keep frames that contribute to the intended scroll motion.

Tools / Products Used

  • ChatGPT (image generation + VR imagery prompts)
  • Google Flow (image-to-video animation)
  • Google AI Studio (layout generation; outputs downloadable code structure/SRC zip)
  • Ezgif (video → JPG frames conversion, including trimming and FPS settings)
  • Antigravity IDE (scroll animations from frame sequences; localhost preview; assembling SRC layouts; integrating video backgrounds)
  • Cloudinary (video hosting for public URLs)
  • Pinterest (visual inspiration for hero, chips, cards, footer, and layout references)

Main Sources / Speakers

The tutorial is narrated by the channel creator (e.g., “Hello friends… Welcome back…”) and relies on outputs from: ChatGPT, Google Flow, Google AI Studio, Antigravity IDE, Cloudinary, Ezgif, and Pinterest.

Original video