johannesasgeir

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.