Cinematic Scrolling Pet Food Webpage

I made this $10,000 website with one prompt over the weekend…

Just joking. I made another mock-up webpage for fun using one main prompt and a few smaller prompts to adjust it.

It mostly cost me some time and about 1% of my weekly Antigravity credits.

I got the idea for the salivating dog swirling up its food from an image I saw, and I decided to turn it into an animated web concept.

I am going to keep posting random ideas like this because I make something new almost every day.

As usual, I created it with Gemini, Google Flow, and Antigravity.

At the end, I asked Antigravity to write a reusable prompt for creating a smooth, mouse-scroll-animated website hero section like this again.

Here is the prompt it gave me ↓
---------------------------------------------------

I want to build a premium, scroll-driven frame animation (scrollytelling) hero section in vanilla HTML, CSS, and JavaScript. 

The image frames are located in a folder named 'frames' and are numbered sequentially from 'frame_005.jpg' to 'frame_181.jpg' (replace with your specific file names and range).

Please implement this using the following high-performance frontend mechanics to ensure it is buttery-smooth, responsive, and has zero white flashes on loading/scrolling:

1. HTML5 Canvas Cover Sizing & DPI Scaling:
   - Use an HTML5 `<canvas>` element pinned inside a sticky viewport container (`position: sticky; height: 100vh; top: 0;`).
   - Dynamically scale the canvas width and height in JS using `window.devicePixelRatio` to keep drawings crisp on high-DPI (Retina) screens.
   - Implement "cover" scaling coordinates inside the drawing loop so the frames fill the viewport and crop centered, behaving like CSS `object-fit: cover`.

2. Double-Queue Progressive Asset Preloader:
   - Create a loading screen. To prevent the page from locking up on download, split frame loading into two queues:
     a) Priority Queue: Preload only every 5th frame (e.g., index 5, 10, 15, ..., 181). Once this priority batch is loaded, hide the preloader screen and launch the page instantly.
     b) Background Queue: After launching, load the remaining intermediate frames asynchronously in small batches (e.g., batches of 4 with a 50ms delay) to avoid choking the browser network.

3. Outward Neighbor Fallback Search:
   - While scrolling, if the render loop requests a frame index that hasn't finished downloading yet, search the image cache array outward (check index-1, index+1, index-2, index+2, etc.) and draw the closest available loaded frame. This guarantees a fluid experience with zero visual flashing or black frames during initial scrolls.

4. Linear Interpolation (Scroll Lerping):
   - Track `targetFrame` based on scroll progress, and use a separate float `currentFrame` that smoothly glides toward `targetFrame` in a `requestAnimationFrame` loop.
   - Use linear interpolation (lerp): `currentFrame += (targetFrame - currentFrame) * 0.08` (tweak coefficient for slide speed).
   - Only trigger canvas draws when the difference is greater than 0.001 to minimize CPU usage when the user stops scrolling.

5. Responsive Design & Glassmorphic Overlays:
   - Overlay structured text narrative cards that fade in/out at specific scroll ranges.
   - Build a vertical scroll progress timeline indicator dot grid on the right side that highlights the active section and scrolls to it smoothly on click.