How to Build a Scroll-Effect Website for Your Café — Using AI

What You Will Build

A single-page café website where the hero section animates as the user scrolls — food and drink visuals appear to move and transition in cinematic slow motion as the user scrolls down the page.

This guide uses a casual all-day dining café as the working example. Every prompt includes a placeholder [YOUR CAFÉ NICHE] so you can swap it for your concept — specialty coffee, brunch spot, vegan café, or bakery.

Process Overview

What You Need Before You Start

Tools (all free to start)

• Whisk by Google — whisk.google.com — AI image generation with style mixing
• Flow by Google — labs.google/flow — AI video from still images
• OzLayer Frame Extractor — ozlayers.com.au/tools — extract 120 frames from your clip (first use free)
• Claude Code / ChatGPT / DeepSeek / Gemini — for generating website code
• Netlify Drop — netlify.com/drop — deploy live in 60 seconds, free

Five Things to Decide Before Opening Any Tool

1. Your café niche and vibe — one sentence
2. Your hero dish or drink
3. Your font vibe — modern serif, clean sans-serif, or warm handwritten
4. Your call to action — Book a Table, Order Online, or View Menu
5. Your contact details — address, phone, email, hours

File Directory Structure

Your entire project lives in one folder. Here's the structure:

your-cafe-website/
├── index.html           ← Complete website (HTML + CSS + JS in one file)
└── images/
    └── hero/
        ├── 001.jpg      ← Animation frames — 120 total
        ├── 002.jpg
        └── 120.jpg

Key Points

Single-File Design: All HTML, CSS, and JavaScript lives in index.html. No build step, no dependencies, no framework. Drag and drop to deploy.

Frame-Based Animation: The scroll animation draws JPEG frames to a canvas element — no embedded video, no autoplay issues, no mobile playback restrictions.

Naming must be 3-digit padded: Use 001.jpg not 1.jpg. The JavaScript pads frame numbers automatically.

Step 1 — Define Your Visual Identity

Before touching any tool, fill out this identity template. Copy it into a notes app. You'll paste parts of it into every prompt.

Cafe name:       [YOUR CAFE NAME]
Niche:           [e.g. casual all-day dining / specialty coffee / vegan brunch]
Vibe:            [e.g. sun-lit, warm, neighbourhood, relaxed]
Hero item:       [e.g. avocado toast / cold brew / eggs benedict]
Call to action:  [e.g. Book a Table / Order Online / See Our Menu]
Address:         [Street, Suburb, State, Postcode]
Opening hours:   [e.g. Mon–Sun 7am–4pm]

Filled Example — The Daily Table

Cafe name:       The Daily Table
Niche:           Casual all-day dining
Vibe:            Sun-lit, warm, neighbourhood, relaxed
Hero item:       Eggs benedict with crispy prosciutto
Call to action:  Book a Table
Address:         42 George Street, Newtown NSW 2042
Opening hours:   Mon–Sun 7am–4pm

Step 2 — Generate Hero Visuals in Whisk

Whisk lets you mix a subject image with a style reference to generate polished, on-brand food photography. You don't need a camera or a photographer.

1. Go to whisk.google.com and sign in with your Google account.
2. Click Create and select Image Mix.
3. Upload or find a reference image of your hero dish.
4. Paste the following prompt into the style field.

Whisk Image Prompt

Cinematic food photography of [YOUR HERO ITEM] at [YOUR CAFÉ NAME].
Aesthetic: [YOUR VIBE ADJECTIVES] — natural window light, shallow depth of field,
warm tones. Shot on medium format. Editorial magazine quality.
No text, no watermarks, no people.

Filled Example — The Daily Table

Cinematic food photography of eggs benedict with crispy prosciutto at The Daily Table.
Aesthetic: sun-lit, warm, neighbourhood, relaxed — natural window light, shallow depth of field,
warm tones. Shot on medium format. Editorial magazine quality.
No text, no watermarks, no people.

Step 3 — Create Animation Frames in Flow

Flow by Google converts your best Whisk image into a smooth 4-second video clip. You then extract that clip into individual frames for the scroll animation.

1. Go to labs.google/flow.
2. Upload your best Whisk image.
3. Select Image to Video and paste the motion prompt below.
4. Set duration to 4 seconds, resolution to 1080p.
5. Generate 2–3 variations and pick the smoothest one.

Flow Motion Prompt

Cinematic slow push-in. The camera slowly drifts forward toward [HERO ITEM].
Shallow depth of field. Steam gently rises. Warm bokeh in background.
Ultra smooth, no shake, no cuts. Film grain. 4 seconds.

Extract Frames from Your Clip

After downloading your video clip, extract it into 120 individual JPEG frames. There are three ways to do this:

Option A — OzLayer Frame Extractor (recommended)

1. Go to ozlayers.com.au/tools.
2. Upload your video clip.
3. Select 120 frames and output format JPEG 85%.
4. Click Extract — download the ZIP file.
5. Unzip into your project's images/hero/ folder.

Option B — ezgif.com

1. Go to ezgif.com/video-to-jpg.
2. Upload your clip and select 30 fps.
3. Click Extract Frames and download the ZIP.
4. Rename files to 3-digit format: 001.jpg, 002.jpg, etc.

Option C — FFmpeg (advanced users)

If you have FFmpeg installed, run this command in Terminal:

ffmpeg -i your_clip.mp4 -vf fps=30 -q:v 2 images/hero/%03d.jpg

This extracts at 30fps. A 4-second clip gives you 120 frames. Files are automatically saved to images/hero/ with 3-digit padding.

Step 4 — The Annotated Master Build Prompt

This is a single prompt you paste into Claude Code, ChatGPT, DeepSeek, or Gemini. It is structured in six sections. The AI reads all six sections and builds the entire website in one response.

Section 1 — Brand Brief (fill this in before pasting)

You are a senior front-end developer building a premium single-page restaurant website.
Build the COMPLETE website in one response. Do not stop until the entire file is complete.

CAFÉ IDENTITY:
- Name: [YOUR CAFÉ NAME]
- Tagline: [ONE-LINE TAGLINE]
- Niche: [YOUR NICHE]
- Vibe: [YOUR VIBE ADJECTIVES]
- Hero item: [YOUR HERO DISH OR DRINK]
- Call to action: [YOUR CTA TEXT]
- Address: [YOUR ADDRESS]
- Phone: [YOUR PHONE]
- Email: [YOUR EMAIL]
- Hours: [YOUR HOURS]

THEME: Dark background (#0d0d0d), warm cream accent (#e8d5b0), white body text.
TYPOGRAPHY: Use Google Fonts — [YOUR FONT CHOICE] for headings, Inter for body text.

HERO TEXT OVERLAY (appears at 85% scroll progress):
- Line 1 (large): [YOUR HERO DISH NAME]
- Line 2 (medium): [YOUR TAGLINE]
- CTA Button: [YOUR CTA TEXT]
- CTA Link: #reservations

ABOUT SECTION COPY:
[WRITE 2 SHORT PARAGRAPHS ABOUT YOUR CAFÉ]

MENU ITEMS (6 items, 2 per category):
Breakfast: [ITEM 1 — description — $XX] / [ITEM 2 — description — $XX]
Lunch: [ITEM 3 — description — $XX] / [ITEM 4 — description — $XX]
Drinks: [ITEM 5 — description — $XX] / [ITEM 6 — description — $XX]

Section 2 — Global Styles

CSS REQUIREMENTS:
:root {
  --bg: #0d0d0d;
  --accent: #e8d5b0;
  --text: #ffffff;
  --grey: #8a8a8a;
  --radius: 12px;
}
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
* { box-sizing: border-box; }
All sections below the canvas: position: relative; z-index: 10;

Section 3 — Navigation

NAV REQUIREMENTS:
- Fixed top, full width, z-index 50
- Logo left (café name, heading font)
- Links right: Menu · About · Reservations
- Backdrop blur, semi-transparent dark background
- No CTA button in nav — the page IS the CTA

Section 4 — Hero Canvas + Scroll Animation

SCROLL ANIMATION REQUIREMENTS:
HTML:
  <div id="canvas-wrap"> <!-- fixed, full viewport -->
    <canvas id="hero-canvas"></canvas>
    <div id="hero-text"> <!-- overlay text, fades in at 85% -->
      <h1>[HERO DISH]</h1>
      <p>[TAGLINE]</p>
      <a href="#reservations">[CTA]</a>
    </div>
  </div>
  <div id="scroll-spacer"></div> <!-- height: 300vh -->

JAVASCRIPT (annotated):
const FRAMES = 120;         // total frame count
const imgs = [];            // preloaded Image objects
let loaded = 0;

// 1. Preload all frames
for (let i = 1; i <= FRAMES; i++) {
  const img = new Image();
  img.src = `images/hero/${String(i).padStart(3,'0')}.jpg`;
  img.onload = () => { loaded++; if (loaded === FRAMES) init(); };
  imgs.push(img);
}

// 2. Resize canvas to cover viewport maintaining aspect ratio
function resize() {
  const a = imgs[0].naturalWidth / imgs[0].naturalHeight;
  if (innerWidth / innerHeight > a) {
    canvas.width = innerWidth; canvas.height = innerWidth / a;
  } else {
    canvas.height = innerHeight; canvas.width = innerHeight * a;
  }
}

// 3. Draw current frame — centred cover-fit
function draw(idx) {
  const i = Math.max(0, Math.min(FRAMES-1, Math.floor(idx)));
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.drawImage(imgs[i], 0, 0, canvas.width, canvas.height);
}

// 4. Map scroll position to frame index
window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    const top = spacer.offsetTop;
    const h   = spacer.offsetHeight;
    const p   = Math.max(0, Math.min(1, (scrollY - top) / (h - innerHeight)));
    draw(p * (FRAMES - 1));
    // 5. Show overlay text at 85%+ progress
    heroText.style.opacity = p > 0.85 ? 1 : 0;
  });
});

Section 5 — Content Sections

CONTENT SECTIONS (in order, after scroll spacer):
1. MENU SECTION — id="menu"
   - 3-column grid (desktop), 1-column (mobile)
   - Each item: name (heading font), description (grey), price (accent colour)

2. ABOUT SECTION — id="about"
   - 2-column: text left, large decorative initial letter right
   - Include the two about paragraphs from the brand brief

3. RESERVATIONS SECTION — id="reservations"
   - Simple form: Name, Email, Phone, Date, Party Size, Message
   - Submit button: accent background, black text
   - Address and hours below the form

Section 6 — Footer

FOOTER:
- Dark background, 3 columns
- Left: café name + tagline
- Centre: nav links (Menu · About · Reservations)
- Right: address, phone, email, hours
- Bottom bar: © 2026 [CAFÉ NAME]. Website by OzLayer.

Step 5 — Troubleshooting

Issue 1: Frames Not Loading (Blank Screen)

This is always a file path problem. Check your folder structure matches exactly:

✅ Correct:   images/hero/001.jpg
❌ Wrong:     images/001.jpg
❌ Wrong:     hero/001.jpg
❌ Wrong:     images/hero/1.jpg   (missing zero-padding)

Issue 2: Animation Jumpy or Stutters

Lower the frame count. Change the FRAMES constant from 120 to 60, then re-extract your clip at 15fps instead of 30fps. Fewer, larger frames load faster on slow connections.

Issue 3: AI Output Was Cut Off

Paste this continuation prompt:

Issue 4: Layout Broken on Mobile

Step 6 — Deploy in 60 Seconds

1. Go to app.netlify.com/drop.
2. Drag your entire project folder (containing index.html and the images/ folder) directly onto the page.
3. Netlify automatically deploys and gives you a live URL — something like random-name.netlify.app.
4. To use a custom subdomain, click Site settings → Change site name and set it to your café's name.

Quick Tips — Monetise This Website Design

1. Sell as an OzLayer service — Use this exact process to build scroll-effect websites for local businesses. Suggested pricing:
   • Starter — $450 (single page, scroll animation, mobile-ready)
   • Growth — $850 (+ booking system, Google reviews integration)
   • Authority — $1,500 (+ blog, SEO setup, custom domain)
   • Booking Pro — $1,200 (full booking/order management system)
2. $2 frame extractor tool as lead generator — Someone using your tool is already 80% of the way to needing your full service. Add a "Want this built for you?" CTA after extraction.
3. Guide as lead magnet — Offer the full PDF guide download in exchange for an email address. Build your list while delivering value.
4. Paid Instagram ad funnel — Run a reel showing the scroll effect in action (film your screen while building). CTA: "Get yours from $450." Even a $10/day budget can generate consistent leads.
5. Portfolio compounding — Every site you build is a demo. Link each live site back to OzLayer. Over 6 months, your portfolio becomes your main sales asset.
6. Sell the guide as a digital product — Package this guide (with the master prompts, frame extractor access, and video walkthrough) as a $15–$29 digital download on Gumroad or your own site.