Скачать или смотреть Reaction Video: This guy builds a site using Google Antigravity and turns it into a WordPress theme.

Link to the video I'm reacting to:    • How I Build Responsive Animated Websites w...  

🔗 Links & Resources:
Get Etch: https://etchwp.com?aff=43a07932 (affiliate link)
Automatic CSS (ACSS): https://automaticcss.com/ref/2441/ (affiliate link)

Want to learn how to leverage AI to grow your agency?
https://community.modernbuilderssocie... (affiliate link)

Looking for web development or branding services? https://apexbranding.design

🔴 Subscribe for more real-world web development builds and reviews!

In this video I recreate the hero section from Elementor's recently rebranded homepage as a fun "hate coding" exercise, inspired by its fancy GSAP animations and scroll-jacking behavior.

The original features a background video (I used a static image instead) that shrinks down on scroll until it reaches a final size, after which normal page scrolling resumes; text and CTA fade out/disappear during the shrink, with some minor background image transitions I didn't replicate.

I show the live result on my Etch-built WordPress site: scrolling shrinks the hero smoothly (works up and down), text/CTA vanishes like the original, and it handles mobile responsively on page load (elements center properly, though resizing the window mid-view can glitch due to JS—normal for such libraries; refresh fixes it).

The process started in Replit with AI (likely Claude or similar): I used about 11 iterative prompts to build it first in React/Tailwind (big image shrink, centering, etc.), then asked the AI for a prompt to convert it to vanilla HTML/CSS/JS—it one-shotted the vanilla version in a new chat.

The code relies on GSAP core + ScrollTrigger (via CDN script tags I added directly in Etch's HTML element—no enqueue needed for this demo). I pasted the HTML structure into an Etch page, dumped the CSS into a new Style Manager sheet ("Elementor"), inserted GSAP/ScrollTrigger CDNs as HTML script tags inside the hero div, removed Replit's import lines, and it worked on the frontend (not in the builder preview).

I note it's straightforward to integrate JS libraries like GSAP into Etch this way (CDN or enqueue), contrast it with simpler libs like AOS for basic fade-ins, and emphasize that custom blocks aren't necessary anymore for most site builds—Etch handles this fine.

The video ends recapping the three-step flow (AI build → vanilla conversion → Etch paste) and highlighting how easy it is to pull off advanced scroll animations without plugins.