Enter your search text in the box above

Select a result to preview

Scroll Animation Site

Build a Premium Scroll Animation Website with Payments

From Zero to Live E-Commerce Website in Under 4 Hours

Author: Dhiraj S
YouTube: @imdhirajS
Community: AutomationX
Difficulty: Beginner-Friendly
Updated: February 2026

Video: https://youtu.be/_ALR68Nmte4?si=z_6NwYI7_vjRmhTa

Editorial Review and Corrections Applied

This version has been cleaned into valid, readable markdown. The main fixes are:

Important correction: Static Firebase Hosting is fine for a front-end-only export. If the site uses server-side Razorpay order creation, payment verification, protected API routes, or webhooks, you need a backend runtime such as Firebase Functions, Firebase App Hosting, Vercel/Next.js server routes, or another server. Do not put private payment secrets into browser-accessible code.

Security correction: Base64 is not encryption. Do not use online Base64 tools for real production API keys. Use local terminal commands and store secrets in environment variables or a secret manager.

📋 TABLE OF CONTENTS

Part 1: Build The Scroll Animation Website

Part 2: Add E-Commerce Features

🎯 WHAT YOU WILL BUILD

By the end of this masterclass, you will have:

✅ A live, premium scroll animation website
✅ Product bottle animation (cap pops, liquid explodes)
✅ User authentication (login/signup)
✅ Payment integration with Razorpay
✅ Order management system
✅ Hosted live on the internet (FREE)

🛠️ TOOLS YOU WILL USE

Tool What It Does Why We Use It Link
Google Whisk AI image generator Creates product bottle images & explosion frames labs.google/fx/tools/whisk/
Google Flow (Veo) AI video generator Turns start/end images into smooth animation labs.google.com
EzGIF Video to frames converter Splits video into 100-150 individual images ezgif.com
AntiGravity AI website builder Builds complete Next.js website from prompts antigravity.google/
Firebase Web hosting platform Hosts your website live (free tier) firebase.google.com
Supabase Database + Auth Manages users and orders supabase.com
Razorpay Payment gateway Processes payments in India razorpay.com

📦 WHAT YOU NEED BEFORE STARTING

☐ Laptop/computer with internet
☐ Google account (for Whisk, Flow, Firebase)
☐ Node.js installed (nodejs.org)
☐ About 3-4 hours of free time
☐ Razorpay account (for payments section)
☐ Supabase account (for database section)

Part 1: Build The Scroll Animation Website

PHASE 1: Create Your Product Images

Tool: Google Whisk
Time: 15-20 minutes
Output: 2 images (start frame + end frame)

STEP 1.1: Generate START FRAME (Clean Sealed Bottle)

Website https://labs.google/fx/tools/whisk

Actions:
  1. Open https://labs.google/fx/tools/whisk in your browser
  2. Sign in with your Google account
  3. You'll see a text box for prompts
Copy and paste this EXACT prompt:

A realistic premium cold-pressed strawberry juice glass bottle on a
pure black background. The bottle contains vibrant pink-red strawberry
juice. Clear glass bottle with black metal cap SEALED and closed,
centered composition, professional product photography, 8k resolution,
studio lighting. The bottle is completely sealed and pristine. White
text label "PREMIUM COLD PRESSED JUICE".

Actions:
  1. Click "Generate" or "Create"
  2. Wait 30-60 seconds
  3. Review the generated image
  4. Click the download button
  5. Save it as: strawberry-start.png
✅ Quality Check:

STEP 1.2: Generate END FRAME (Cap Open + Explosion)

Stay in Google Whisk

Copy and paste this EXACT prompt:

A glass bottle with BLACK CAP REMOVED AND FLYING OFF. Explosive splash
of pink-red strawberry juice erupting and shooting upward from the
open bottle top. Fresh whole strawberries and ice cubes flying outward
from the bottle opening. Dynamic liquid fountain shooting up and
splashing outward. The bottle remains intact at the bottom. High-speed
photography, pure black background, professional beverage commercial,
8k quality.

Actions:
  1. Paste the prompt
  2. Click "Generate"
  3. Wait 30-60 seconds
  4. Review - you should see liquid exploding FROM THE TOP
  5. Download the image
  6. Save it as: strawberry-end.png
✅ Quality Check:
❌ If bottle is BREAKING in the middle:

Regenerate 2-3 times. Add "bottle stays intact, only liquid explodes from open top" to the prompt.

📸 VISUAL REFERENCE

Your images should look like this:

Start Frame: Clean sealed bottle
End Frame: Explosion from top

PHASE 2: Create the Animation Video

Tool: Google Flow (Veo)
Time: 10-15 minutes
Output: 1 MP4 video (3-5 seconds)

STEP 2.1: Open Google Flow

Website: https://labs.google/fx/tools/flow

Actions:
  1. Go to labs.google.com
  2. Look for "Veo" or "Flow" in the tools list
  3. Click on it to open
  4. Select "Frames to Video" mode

Why Frames to Video?

This mode takes your START and END images and creates a smooth animation between them. It's perfect for product animations where you control the exact start and end states.

STEP 2.2: Upload Your Images

Actions:
  1. Click "Upload Start Frame" or drag your strawberry-start.png into the first box
  2. Click "Upload End Frame" or drag your strawberry-end.png into the second box
  3. Verify both images are loaded correctly

STEP 2.3: Add Animation Prompt

Copy and paste this EXACT prompt:

Cinematic slow-motion of a premium strawberry juice bottle cap popping
open. The black cap flies off and explosive liquid fountain shoots
upward from the bottle opening with strawberries and ice cubes erupting
outward. Smooth transition from sealed bottle to dramatic liquid
explosion from the top. The bottle stays intact. Professional food
photography, 8k quality.

Why this prompt?

This tells Flow exactly HOW to animate between your two frames:

STEP 2.4: Generate Video

Actions:
  1. Click "Generate" or "Create Video"
  2. Wait 2-5 minutes (AI video takes time!)
  3. You'll see a progress indicator
  4. Once done, a preview will appear

STEP 2.5: Preview & Download

Actions:
  1. Click the play button to preview
  2. Watch the full animation
  3. Check if it looks smooth
  4. If satisfied, click "Download"
  5. Save as: strawberry-explosion.mp4
✅ Quality Check:
❌ If animation looks wrong:

PHASE 3: Extract Frames from Video

Tool: EzGIF
Time: 5-10 minutes
Output: 100-150 individual frame images

Why Do We Need Frames?

Simple explanation:

Websites can't play MP4 videos with scroll control. Instead, we show ONE image at a time, changing images as you scroll. When images flip fast enough = smooth animation (like a flipbook!).

Technical explanation:

Using HTML Canvas with individual frames gives us:

STEP 3.1: Open EzGIF

Website: https://ezgif.com/video-to-jpg

Actions:
  1. Open ezgif.com in your browser
  2. Click "Video to JPG" in the top menu
  3. You'll see a file upload interface

STEP 3.2: Upload Your Video

Actions:
  1. Click "Choose File"
  2. Select your strawberry-explosion.mp4
  3. Click "Upload video!"
  4. Wait 10-30 seconds for upload

STEP 3.3: Set Frame Extraction Settings

You'll see several options. Use these recommended settings:

Setting Value Why
Frame rate 25 fps Smooth animation without too many files
Total frames 100-150 Sweet spot for performance vs smoothness
Output format JPG Smaller file size than PNG
Size Original Keep quality, we'll resize in code if needed
Actions:
  1. Set "Frame rate" to 25
  2. OR set "Extract every Nth frame" to get 100-150 total
  3. Select "JPG" as output format
  4. Leave size as "Original"

Why 100-150 frames?

STEP 3.4: Extract Frames

Actions:
  1. Click "Convert to JPG!" button
  2. Wait 30-60 seconds for processing
  3. You'll see a grid of all extracted frames
  4. Scroll through to preview

STEP 3.5: Download Frames

Actions:
  1. Scroll down past the frame previews
  2. Click "Download frames as ZIP"
  3. Save the ZIP file
  4. Extract/unzip it to a folder
  5. Rename the folder to: strawberry-juice-2 (or any clear name)

STEP 3.6: Note Frame Details (IMPORTANT!)

Open the extracted folder and check:

✏️ Total number of frames: _______ (e.g., 143)
✏️ Frame naming format: _______ (e.g., frame_001.jpg, frame_002.jpg, etc.)
✏️ First frame name: _______ (e.g., frame_001.jpg)
✏️ Last frame name: _______ (e.g., frame_143.jpg)

Why is this important?

You'll need these exact details when building the website in AntiGravity!

✅ Quality Check:

PHASE 4: Build the Website with AntiGravity

Tool: Google AntiGravity
Time: 45-90 minutes
Output: Complete Next.js website with scroll animation

Why AntiGravity?

What it does:

AntiGravity is an AI website builder. You describe what you want in plain English, and it generates complete production-ready code (HTML, CSS, JavaScript, React, Next.js).

Why not code it yourself?

STEP 4.1: Upload Your Frames to AntiGravity

Website: https://antigravity.google/

Actions:
  1. Open anti.gravity.app
  2. Sign in with your Google account
  3. Click "New Project" or "Start New"
  4. You'll see a file upload area on the left
Upload frames:
  1. Create a folder in the project called frames or strawberry-juice-2
  2. Upload ALL your extracted frame images into this folder
  3. Wait for all files to upload (may take 2-5 minutes)
✅ Confirm:

STEP 4.2: The Main Build Prompt

This is the most important step! Copy this prompt EXACTLY and customize the highlighted parts:

Build me a premium, luxury product showcase website with a scroll-controlled animation for a strawberry juice brand.

PRODUCT: Premium Cold-Pressed Strawberry Juice

BRAND VIBE: Dark, luxury, premium — like Apple or Nike product pages. Think high-end beverage commercial meets tech product launch.

COLOR SCHEME:

SCROLL ANIMATION (Most Important Part):

SECTIONS I WANT (in order, scrolling down):

  1. HERO SECTION:
  1. STORY SECTION:
  1. INGREDIENTS SECTION:
  1. CALL TO ACTION SECTION:

DESIGN RULES:

TECH PREFERENCES:

🔧 CUSTOMIZE THESE PARTS:

STEP 4.3: Generate the Website

Actions:
  1. Paste the customized prompt into AntiGravity's chat/prompt box
  2. Press Enter or click "Generate"
  3. Wait 3-10 minutes while AI generates code
  4. You'll see multiple files being created (this is normal)

What's happening?

AntiGravity is creating:

STEP 4.4: Preview & Test

Actions:
  1. Once generation is complete, click "Preview" button
  2. Wait for the dev server to start
  3. Your website will open in a preview panel
Test these things:

STEP 4.5: Fix Common Issues (If Needed)

If canvas is blank / animation not showing:

The scroll animation canvas is not showing images. Fix the HeroCanvas
component: make sure frames load from /strawberry-juice-2/, frame names
match frame_001.jpg format, add console.log for debugging, match canvas
size to image dimensions, check scroll event listener is attached.

If animation is choppy:

Preload ALL frame images before starting animation, show loading screen
with progress bar, use requestAnimationFrame for smooth rendering, cache
images so each loads only once, try 3000px scroll distance instead of
4000px for faster animation.

If broken on mobile:

Make canvas resize based on screen width using window.innerWidth, reduce
font sizes on small screens with Tailwind breakpoints, stack ingredient
cards vertically on mobile, ensure sticky canvas works on iOS Safari,
add mobile-specific padding and margins.

If page loads too slowly:

Convert all frame images to WebP format for compression, lazy load
frames near current scroll position only, reduce frame width to max
1000px, add a loading progress bar with percentage, optimize Next.js
Image component settings.

✅ Quality Check Before Deployment:

PHASE 5: Deploy to Firebase (Go Live!)

Tool: Google Firebase
Time: 15-20 minutes
Output: Live website URL

Why Firebase?

Firebase is Google's free web hosting service that offers:

STEP 5.1: Install Firebase Tools

Open Terminal/Command Prompt:
Run this command:
npm install -g firebase-tools

Press Enter and wait. This installs Firebase CLI (Command Line Interface).

✅ Verify installation:
firebase --version

You should see a version number (e.g., 13.0.2).

STEP 5.2: Log In to Firebase

Run this command:
firebase login
What happens:
  1. A browser window opens
  2. Select your Google account
  3. Click "Allow" to give Firebase access
  4. Terminal shows "✔ Success! Logged in as your@email.com"

STEP 5.3: Navigate to Your Project Folder

In Terminal, type:
cd path/to/your/project/folder
Example:
cd ~/Desktop/strawberry-juice-website

💡 Tip: Drag the project folder from File Explorer/Finder into the Terminal window - it auto-fills the path!

STEP 5.4: Initialize Firebase

Run this command:
firebase init
You'll see a series of questions. Answer like this:

Question 1: "Which Firebase features do you want to set up?"
Answer: Use arrow keys to select Hosting, press Space to check it, press Enter

Question 2: "Please select an option:"
Answer: Select "Create a new project" (if new) OR "Use an existing project" (if you already have one)

Question 3: "What do you want to use as your public directory?"
Answer: Type out and press Enter
(This is where Next.js puts built files)

Question 4: "Configure as a single-page app?"
Answer: Type y (yes) and press Enter

Question 5: "Set up automatic builds with GitHub?"
Answer: Type n (no) and press Enter

Question 6: "File out/index.html already exists. Overwrite?"
Answer: Type n (no) and press Enter

✅ You'll see: "Firebase initialization complete!"

STEP 5.5: Build Your Project

Run this command:
npm run build
What happens:

✅ Success message: "Export successful!"

STEP 5.6: Deploy to Firebase

Run this command:
firebase deploy
What happens:
  1. Firebase uploads all your files
  2. Sets up hosting configuration
  3. Takes 1-2 minutes
  4. Shows upload progress
✅ Success message:

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project/overview
Hosting URL: https://your-project-name.web.app

STEP 5.7: Test Your Live Website

Actions:
  1. Copy the Hosting URL (ends with .web.app)
  2. Paste it in your browser
  3. Your website is now LIVE on the internet! 🎉
Test on multiple devices:

🎉 Congratulations!

You've just built and deployed a premium scroll animation website using AI!

Your website is now:

✅ Live on the internet
✅ Accessible to anyone with the link
✅ Hosted for FREE
✅ Has a professional scroll animation

Optional: Connect Custom Domain

  1. Go to Firebase Console
  2. Select your project
  3. Click "Hosting" in the left menu
  4. Click "Add custom domain"
  5. Follow the instructions to connect your domain
  6. Free HTTPS certificate is auto-generated!

Part 2: Add E-Commerce Features

Now let's add database, authentication, and payments to turn your website into a full e-commerce platform!

BONUS A: Connect Supabase MCP (Database + Auth)

Tool: Supabase
Time: 10-15 minutes
What you'll get: User authentication + Order database

What is Supabase?

Supabase is an open-source Firebase alternative that provides:

What is MCP?

MCP = Model Context Protocol

It's a way for AntiGravity to talk directly to other tools (like Supabase, Razorpay, N8N). Once connected, you can manage your database just by typing commands in plain English!

Example:

Instead of writing SQL manually, you type:
"Create a table called orders with columns: id, user_email, product_name, amount, status"

AntiGravity understands and creates it automatically! 🤯

STEP A.1: Create Supabase Account & Get Access Token

1. Sign up for Supabase:
2. Create a new project:
3. Generate Access Token:

⚠️ IMPORTANT: Copy the token immediately! You can't see it again. It looks like:

sbp_7c78ce47ab23c506253b463f4fccbeacf17d92

Save it in a secure note/file.

STEP A.2: Connect Supabase to AntiGravity via MCP

1. Open AntiGravity MCP Configuration:
2. Add Supabase Configuration:

You'll see a JSON file. Add this inside the mcpServers section:

"supabase-mcp-server": {
"command": "npx",
"args": [
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"YOUR_SUPABASE_ACCESS_TOKEN_HERE"
],
"env": {}
}

3. Replace placeholder:
4. Save and restart:

STEP A.3: Test Supabase Connection

In AntiGravity chat, type:

Create a database table called "orders" with these columns:

What should happen:

AntiGravity will use Supabase MCP tools to create the table. You'll see a success message!

Verify in Supabase Dashboard:
  1. Go to your Supabase project
  2. Click "Table Editor" in sidebar
  3. You should see the "orders" table with all columns! ✅

STEP A.4: Add Authentication to Your Website

In AntiGravity, type:

Add Supabase authentication to my website:

  1. Create a login page at /login with email and password fields
  2. Create a signup page at /signup
  3. After successful login, redirect to the home page
  4. Add a "Sign Out" button in the navigation bar
  5. Use Supabase Auth for authentication
  6. Store user session in local storage

AntiGravity will generate the auth pages and integrate them into your Next.js app!

BONUS B: Connect Razorpay MCP (Payments) - COMPLETE GUIDE

Tool: Razorpay
Time: 20-30 minutes
What you'll get: Full payment integration with India's #1 gateway

What is Razorpay?

Razorpay is India's first payment gateway with MCP support. It allows you to:

Why Razorpay MCP?

Instead of manually integrating APIs and writing code, you can control everything through AntiGravity with plain English commands!

Understanding Base64 Encoding (Required Reading!)

⚠️ CRITICAL: Razorpay connection will FAIL without proper Base64 encoding. Read this section carefully!

What is Base64?

Base64 is a way to encode text into a format safe for internet transmission. It's NOT encryption or security - it's just a standard format converter.

Why does Razorpay need it?

Razorpay uses HTTP Basic Authentication - a web standard that requires credentials in Base64 format. Without it, you'll get a "401 Unauthorized" error.

Think of it like this:

Your keys are like a letter. Base64 is the envelope that makes sure the letter arrives intact through the mail system.

STEP B.1: Get Your Razorpay API Keys

1.1 Open Razorpay Dashboard:

If you don't have an account:

1.2 Navigate to API Keys:

1.3 Choose Test or Live Mode:

At the top, you'll see two options:

Mode When to Use Keys Start With
Test Mode For learning, development, testing rzp_test_
Live Mode For real payments, after testing rzp_live_
⚠️ For this tutorial, use TEST MODE first!

Click the "Test Mode" toggle.

1.4 Generate API Keys:

1.5 Copy Your Keys:

You'll see two values:

Key ID: rzp_test_1234567890abcdef
Key Secret: abcdefghijklmnop1234567890

Actions:
  1. Click "Copy" next to Key ID
  2. Paste it in a text file (Notepad, Notes app)
  3. Click "Copy" next to Key Secret
  4. Paste it in the same text file

⚠️ IMPORTANT: The Key Secret is shown ONLY ONCE! If you lose it, you must generate new keys.

Save it like this in your text file:

Razorpay Test Keys:
Key ID: rzp_test_1234567890abcdef
Key Secret: abcdefghijklmnop1234567890

STEP B.2: Combine Your Keys for Encoding

2.1 Format Your Credentials:

Open a text editor (Notepad, TextEdit, VS Code).

Type your credentials in this EXACT format:

your_key_id:your_key_secret

Example with actual keys:

rzp_test_1234567890abcdef:abcdefghijklmnop1234567890

CRITICAL RULES:

STEP B.3: Encode to Base64 (Choose ONE Method)

You have 3 methods to encode. Choose the easiest for you.

3A.1 Open Encoding Website:
3A.2 Enter Credentials:
3A.3 Generate Base64:

cnpwX3Rlc3RfMTIzNDU2Nzg5MGFiY2RlZjphYmNkZWZnaGlqa2xtbm9wMTIzNDU2Nzg5MA==

3A.4 Copy the Result:

METHOD B: Mac/Linux Terminal

3B.1 Open Terminal:
3B.2 Run Encoding Command:

Type this (replace with YOUR actual credentials):

echo -n "rzp_test_1234567890abcdef:abcdefghijklmnop1234567890" | base64
Important:
3B.3 Copy Output:

METHOD C: Windows PowerShell

3C.1 Open PowerShell:
3C.2 Run Encoding Command:

Type this (replace with YOUR credentials):

[Convert]::ToBase64StringUTF8.GetBytes("rzp_test_1234567890abcdef:abcdefghijklmnop1234567890")

Press Enter

3C.3 Copy Output:

STEP B.4: Open AntiGravity MCP Configuration

4.1 Open Google AntiGravity:

4.2 Find MCP Menu:

4.3 Navigate to Config File:

STEP B.5: Add Razorpay Configuration

5.1 Understand Your Current File:

You'll see JSON code like this:

{
"mcpServers": {
"supabase-mcp-server": {
"command": "npx",
...
}
}
}

5.2 Add Razorpay Configuration:

After your last server configuration:

  1. Find the closing }
  2. Add a comma ,
  3. Add this code:

"rzp-mcp-server": {
"command": "npx",
"args": [
"mcp-remote",
"https://mcp.razorpay.com/mcp",
"--header",
"Authorization:${AUTH_HEADER}"
],
"env": {
"AUTH_HEADER": "Basic YOUR_BASE64_STRING_HERE"
}
}

5.3 Replace Placeholder:

Find: YOUR_BASE64_STRING_HERE

Replace with: Your Base64 encoded string from Step B.3

⚠️ KEEP "Basic " (with a space after it)!
Example:

"AUTH_HEADER": "Basic cnpwX3Rlc3RfMTIzNDU2Nzg5MGFiY2RlZjphYmNkZWZnaGlqa2xtbm9wMTIzNDU2Nzg5MA=="

5.4 Complete File Example:

Your full mcp_config.json should look like this:

{
"mcpServers": {
"supabase-mcp-server": {
"command": "npx",
"args": [
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"sbp_7c78ce47ab23c506253b463f4fc5fcbeacf17d92"
],
"env": {}
},
"rzp-mcp-server": {
"command": "npx",
"args": [
"mcp-remote",
"https://mcp.razorpay.com/mcp",
"--header",
"Authorization:${AUTH_HEADER}"
],
"env": {
"AUTH_HEADER": "Basic cnpwX3Rlc3RfMTIzNDU2Nzg5MGFiY2RlZjphYmNkZWZnaGlqa2xtbm9wMTIzNDU2Nzg5MA=="
}
}
}
}

STEP B.6: Save and Restart

6.1 Save Configuration:

6.2 Restart AntiGravity:

STEP B.7: Verify Connection

7.1 Open MCP Server List:

7.2 Check Server List:

You should now see:

If you see rzp-mcp-server, the connection works! 🎉

STEP B.8: Test Razorpay Connection

In AntiGravity chat, type:

Create a Razorpay payment link for ₹100 with description "Test Payment for Strawberry Juice"

Press Enter.

What should happen:
  1. AntiGravity recognizes Razorpay MCP tools
  2. Uses your API to create payment link
  3. Returns link details:

✅ Payment link created!
Link: https://rzp.io/i/XXXXXXXX
Amount: ₹100
Description: Test Payment for Strawberry Juice

Testing Payments in Test Mode

Important Rules:
Payment Method Works in Test? How to Test
QR Codes ❌ No Only works in Live mode
UPI ✅ Yes Enter success@razorpay as UPI ID
Cards ✅ Yes Use test card: 4111 1111 1111 1111
Net Banking ✅ Yes Select any bank, auto-succeeds
To test a FAILED payment:
⚠️ No real money is charged in Test Mode!

BONUS C: Build Checkout & Orders System

Now let's integrate everything into your website!

STEP C.1: Add "Order Now" Page with Checkout

In AntiGravity, type:

Create an order page at /order with this layout:

LEFT SIDE:

RIGHT SIDE:

When user clicks "Proceed to Pay":

  1. Validate all form fields
  2. Create Razorpay payment link using MCP
  3. Open Razorpay payment window
  4. After successful payment, save order to Supabase "orders" table
  5. Redirect to /thank-you page

Use Tailwind CSS, glassmorphism design, mobile responsive.

STEP C.2: Add Thank You Page

In AntiGravity, type:

Create a thank you page at /thank-you with:

STEP C.3: Add Orders Dashboard

In AntiGravity, type:

Create an admin dashboard at /admin/orders that:

  1. Requires authentication (redirect to /login if not logged in)
  2. Fetches all orders from Supabase "orders" table
  3. Displays orders in a table with columns:
  1. Add filters: All / Pending / Completed / Cancelled
  2. Add search by email or order ID
  3. Each row has "View Details" button
  4. Use modern table design with hover effects

STEP C.4: Set Environment Variables (Important!)

Your Razorpay keys should be stored securely as environment variables.

Create .env.local file in project root:
NEXT_PUBLIC_RAZORPAY_KEY_ID=rzp_test_1234567890abcdef  
RAZORPAY_KEY_SECRET=abcdefghijklmnop1234567890
In AntiGravity, type:

Update the payment integration to use environment variables:

STEP C.5: Deploy Updated Website

In Terminal, run:
npm run build

firebase deploy

Your website now has FULL e-commerce functionality! 🎉

🎓 MASTER CHECKLIST FOR STUDENTS

Print this and check off as you complete each step:

Part 1: Scroll Animation Website

Part 2: E-Commerce Features

🛠️ TROUBLESHOOTING GUIDE

Whisk Issues

Problem: Images look cartoonish/unrealistic
Solution: Regenerate 2-3 times. Add "photorealistic, professional product photography" to prompt.

Problem: Bottle is not centered
Solution: Add "centered composition, pure black background, isolated product" to prompt.

Google Flow Issues

Problem: Bottle breaks in the middle instead of cap opening
Solution: In the prompt, emphasize "bottle stays intact, only liquid explodes from the open top opening".

Problem: Animation is too fast
Solution: Add "very slow motion, cinematic" to the prompt.

Problem: Video generation fails
Solution: Check file sizes - start/end frames should be under 5MB each. Resize if needed.

EzGIF Issues

Problem: Only got 30-40 frames
Solution: Increase frame rate to 30fps or use "Extract every 2nd frame" setting.

Problem: ZIP download fails
Solution: Try clicking individual frame downloads, or reduce total frames to 100.

AntiGravity Issues

Problem: Canvas shows blank screen
Solution: Check console errors. Verify frame folder path and names match the prompt exactly.

Problem: Animation is choppy
Solution: Add preloading logic. Increase scroll distance from 4000px to 5000px.

Problem: Mobile view broken
Solution: Add responsive canvas sizing: canvas.width = window.innerWidth.

Firebase Issues

Problem: "firebase: command not found"
Solution: Install with admin/sudo: sudo npm install -g firebase-tools

Problem: Build fails
Solution: Delete .next folder, run npm install, then npm run build.

Problem: Deployed but shows blank page
Solution: Check firebase.json - public directory should be out, not build or dist.

Razorpay MCP Issues

Problem: 401 Unauthorized error
Solution: Double-check Base64 encoding. Re-encode and try again. Verify "Basic " (with space) prefix.

Problem: Connection not showing in MCP list
Solution: Check JSON syntax - missing commas, brackets. Restart AntiGravity completely.

Problem: Payment link creation fails
Solution: Verify API keys are from the correct mode (Test/Live). Check Razorpay dashboard for key status.

Supabase MCP Issues

Problem: Cannot create tables
Solution: Check access token is valid. Regenerate token if expired.

Problem: Auth not working
Solution: Enable Email auth in Supabase dashboard: Authentication → Providers → Email (toggle ON).

🎨 CUSTOMIZATION IDEAS

Once you've mastered the strawberry juice website, try these variations:

| Product | Animation Style | Color Scheme |
| Mango Juice | Cap opens, golden liquid splashes with mango slices | Golden-orange + green |
| Energy Drink | Can explodes with neon liquid + lightning effects | Neon green + electric blue |
| Coffee | Bag opens, coffee beans fly out with steam | Brown + cream + white |
| Smoothie Bowl | Bowl spins, fruits float and ingredients layer | Multicolor (berry theme) |
| Perfume | Bottle rotates elegantly, floral petals float | Gold + champagne + white |
| Protein Powder | Container opens, powder cloud explodes with gym vibes | Black + red + silver |

To customize your existing site:

📚 RESOURCES

| Resource | Link | Purpose |
| Google Whisk | whisk.google.com | AI image generation |
| Google Flow | labs.google.com | AI video generation |
| EzGIF | ezgif.com | Video to frames |
| AntiGravity | anti.gravity.app | AI website builder |
| Firebase Console | console.firebase.google.com | Hosting management |
| Supabase | supabase.com | Database + auth |
| Razorpay Dashboard | dashboard.razorpay.com | Payment management |
| Base64 Encoder | mixedanalytics.com/tools/basic-authentication-generator/ | Encode Razorpay keys |
| Next.js Docs | nextjs.org/docs | Framework reference |
| Tailwind CSS | tailwindcss.com | Styling reference |

💡 PRO TIPS

  1. Always use Test Mode for Razorpay until you're 100% ready for real payments.
  2. Save all your prompts in a document - you can reuse them for future projects!
  3. Take screenshots of each step - helps when troubleshooting.
  4. Test on real phones before sharing - mobile experience matters most.
  5. Enable manual approval for MCP tools in AntiGravity when working with production data.
  6. Backup your Firebase project before making major changes.
  7. Use meaningful commit messages if you add GitHub integration later.
  8. Monitor your Supabase usage - free tier has limits (50,000 MAU).
  9. Check Razorpay settlement schedule - payouts happen every 2-3 days by default.
  10. Add Google Analytics to track visitor behavior after launch.

🎉 CONGRATULATIONS!

You've completed the AutomationX Masterclass! You now know how to:

✅ Build premium scroll animation websites using AI
✅ Generate product images and animations with Whisk & Flow
✅ Deploy websites to the internet for free
✅ Integrate databases with Supabase
✅ Add authentication (login/signup)
✅ Process payments with Razorpay
✅ Connect external tools using MCP
✅ Build full e-commerce platforms without coding

What's Next?

  1. Build more projects - practice with different products
  2. Share your creations - post in AutomationX community
  3. Help other students - answer questions in Skool
  4. Go live - switch to Razorpay Live mode and get real customers!
  5. Scale up - add more products, categories, inventory management

Source Attribution

Original tutorial content attributed to Dhiraj Sarkar / AutomationX. This file is an edited markdown cleanup and structural rewrite based on the supplied transcript-derived document.

Made with 🔥 by Dhiraj Sarkar

AutomationX Community | @imdhirajS on YouTube