Google Whisk – First Prompt
Ultra-premium product photography of a sleek black wireless mouse placed on a matte black surface, minimalistic studio photoshoot. Deep black background with subtle gradient falloff, soft rim lighting outlining the mouse’s curves and scroll wheel, controlled reflections on smooth matte and metallic accents. Cinematic lighting, high contrast, luxury tech aesthetic, sharp focus, shallow depth of field. No clutter, no text, no logos emphasized. Shot with a professional DSLR, 85mm lens, f/1.8, ultra-high resolution, photorealistic, Apple-level product shoot, dramatic mood, modern and elegant.
Google Whisk – Second Prompt
Exploded technical diagram view of the same matte black wireless mouse, every component precisely separated and floating in perfect alignment, suspended in mid-air against a deep black studio background. Visible internal structure including the top shell, scroll wheel, switches, optical sensor, circuit board, battery, wireless module, internal frame, and feet layers. Hyper-realistic product visualization, ultra-sharp focus, studio rim lighting identical to the hero shot, soft highlights tracing each component, controlled reflections on matte and metal surfaces. Cinematic lighting, high contrast, luxury engineering aesthetic, no labels, no annotations, no text. Photorealistic, ultra-high resolution, Apple-style industrial design render, dramatic and clean.
Google Flow Prompt
animated transition from Assembled product to Exploded - Very smooth transition
Google Antigravity Prompt
**ACT AS:**
A world-class Creative Developer (Awwwards-level) specializing in Next.js, Framer Motion, and 3D web interactions.
**THE TASK:**
Build a high-end "Scrollytelling" website for a fictional wireless mouse brand called "WSP".
The core mechanic is a scroll-linked animation that plays an image sequence of mouse "exploding" (disassembling) as the user scrolls down.
**TECH STACK:**
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Animation: Framer Motion
- Rendering: HTML5 Canvas (for performance)
**VISUAL DIRECTION & COLOR:**
- **Seamless Blending:** The background of the website MUST match the background color of the image sequence exactly so the image edges are invisible.
- **Color Palette:** Pure Dark Mode. Use `#050505` (or eye-drop the image background) as the page background. Text should be `text-white/90` for headings and `text-white/60` for body.
- **Typography:** Inter or San Francisco. Clean, tracking-tight, minimalist.
**IMPLEMENTATION DETAILS:**
1. **The "Sticky" Canvas:**
- Create a component called `MouseScroll.tsx`.
- It should have a container with `h-[400vh]` (4x viewport height) to allow for a long scroll duration.
- Inside, place a `<canvas>` element that is `sticky`, `top-0`, `h-screen`, and `w-full`.
- Centered perfectly.
2. **The Scroll Logic:**
- Load a sequence of 80 images from `video-split`. Naming convention: `frame_[i]_delay-0.04s.webp`.
- Use `useScroll` from Framer Motion to map the user's scroll progress (000 to 001) to the image frame index (000 to 191).
- Draw the current frame to the canvas on every scroll tick.
- Ensure smooth interpolation so it doesn't stutter.
3. **Text Overlays (The Story):**
- Overlay text sections that fade in/out as the mouse explode.
- **0% Scroll:** "WSP - Wireless Mouse" (Centered Title)
- **30% Scroll:** "Precision Engineering." (Left aligned) -> *Mouse start expanding.*
- **60% Scroll:** "Titanium Drivers." (Right aligned) -> *Mouse fully exploded showing internals.*
- **90% Scroll:** "Hear Everything." (Centered CTA) -> *Mouse reassemble.*
4. **Polish:**
- Add a loading state (spinner) while the images pre-load to prevent flickering.
- Ensure the canvas scales correctly on mobile (contain fit).
**OUTPUT:**
Generate the full code for `page.tsx`, `MouseScroll.tsx`, and `globals.css`.
