1 : Midjourney
Use the uploaded image as the primary and only reference. Recreate the exact same PRIME hydration drink bottle with maximum fidelity and realism. Preserve the original design perfectly identical bottle shape, cap, proportions, label layout, typography, colors, and branding. Do not redesign, reinterpret, or stylize anything. Enhance image quality only: ultra-sharp details, clean edges, accurate text, realistic plastic material, subtle reflections, professional studio lighting. Photorealistic product photography, neutral background, premium commercial quality, 8k, highly detailed, cinematic lighting –ar 2:3 –v 6.0
2 : Whisk
Create a highly realistic, high-speed product photograph using the uploaded PRIME Ice Pop bottle image.
SCENE DESCRIPTION
The PRIME bottle is open (cap removed) and floating slightly above center frame on a pure solid black background.
A burst of clear, cold liquid is spilling naturally from the bottle opening, as if the bottle was just tilted or shaken gently.
The liquid clearly originates from inside the bottle, flowing outward and downward under gravity.
BOTTLE
Bottle is centered, slightly tilted forward
Cap is completely removed (not visible anywhere)
Bottle shape, label, colors, and proportions remain exact
Label is fully visible and unobstructed
Bottle surface shows subtle gloss and realism
LIQUID SPILL (VERY IMPORTANT)
Liquid flows from the bottle mouth, not from around the bottle
Initial flow forms a smooth stream, breaking into realistic splashes
Liquid follows gravity and inertia — no floating or decorative shapes
Splash scale is controlled and believable, not exaggerated
Liquid appears fresh, cold, and clean (sports hydration look, not juice)
ICE CUBES
Include a small number of realistic ice cubes around the spill
Ice cubes should:
Have sharp, imperfect edges
Show internal cracks and trapped air bubbles
Be semi-transparent with natural refraction
Ice cubes appear to be pushed outward by the liquid, not randomly placed
No glowing, no stylized shapes, no fake geometry
COMPOSITION
Liquid and ice frame the bottle, not overpower it
Clear negative space remains around the product
Everything feels suspended in a high-speed camera capture
LIGHTING
Clean commercial studio lighting
Strong specular highlights on:
Liquid edges
Ice corners
Bottle curves
No motion blur — all elements are crisp and frozen in time
BACKGROUND
Pure solid black (#000000)
No gradients
No textures
No fog, smoke, or particles
STYLE & FEEL
Ultra-realistic
Natural physics
Premium sports hydration advertising
Photographic, not CGI
Looks like a real bottle shot with a Phantom high-speed camera
OUTPUT
High-resolution still image
Open bottle with liquid spilling from inside
Ice cubes and water only where physically justified
Exact preservation of the uploaded PRIME bottle’s appearance
Negative / Avoid
No surrounding explosion effects
No decorative splash ribbons
No fake 3D depth
No exaggerated energy effects
No cap fragments
3 : Flow
Create a cinematic product animation for a PRIME Hydration ICE POP drink bottle.
Use the uploaded bottle image as the exact and unchangeable design reference.
GLOBAL CONSTRAINTS:
– Bottle design is locked: no changes to shape, proportions, cap, label, typography, colors, or branding.
– Motion must feel continuous, natural, and physically believable.
– No step-based animation, no hard transitions.
– Effects must support the product, never overpower it.
VISUAL FLOW:
The scene begins in near darkness with a clean, premium studio background.
The bottle is gradually revealed through soft, diffused light and subtle atmosphere — not through dramatic movement.
As it becomes visible, the bottle is already in a slow, controlled rotation around its vertical axis.
The rotation is elegant and minimal, meant only to reveal form and material.
Condensation is present on the bottle surface, catching light naturally and moving subtly with gravity.
Lighting is soft and balanced, with no harsh spotlights.
Highlights are smooth and controlled, allowing the bottle to feel premium and real.
Without interrupting the rotation, the red cap begins to loosen naturally.
The cap unscrews smoothly while the bottle continues rotating.
As the cap lifts, internal pressure releases progressively.
Liquid begins to flow out in slow motion, initially restrained, then forming a sculpted splash.
The splash remains cohesive and intentional, framing the bottle rather than exploding outward.
Liquid energy stays behind and slightly below the bottle.
No liquid or droplets obscure the label or silhouette.
Ice cubes and droplets appear sparingly and intentionally.
Use fewer, larger ice cubes placed to support composition, not clutter it.
Throughout the sequence:
– The bottle remains the sharpest element in the frame.
– Liquid, ice, and droplets are slightly softer with subtle motion blur.
– Depth and contrast guide attention naturally to the branding.
As motion builds toward its peak:
– Bottle movement feels calm and authoritative.
– Surrounding elements carry more motion energy.
– Lighting subtly favors the label area without creating strong hotspots.
FINAL HERO MOMENT:
The motion resolves into a powerful, near-frozen instant:
The bottle is slightly tilted, mid-rotation, with the cap floating above.
Liquid, ice, and droplets are suspended in a controlled, elegant composition.
Branding is crisp, readable, and central.
The scene feels confident, premium, and intentional — like a high-budget beverage advertisement paused at its strongest frame.
STYLE & QUALITY:
– High-end commercial beverage advertising
– Ultra-realistic 3D render
– Cinematic slow motion
– Soft, professional studio lighting
– Physically accurate liquid behavior
– Clean, minimal, brand-first visual language
4 : Antigravity
One-Shot Prompt: “Prime Ice Pop” Ultimate Scrollytelling Experience
Role: You are a world-class Frontend Architect and Creative Developer specializing in “Awwwards” winning interactive websites. Objective: Build a complete, production-ready, single-page “Scrollytelling” e-commerce site for Prime Ice Pop. The site must use Next.js 14+ (App Router), TypeScript, Tailwind CSS, and Framer Motion. Key Requirement: Generate every single file required so I can copy-paste them and run npm run build immediately.
1. Technical Specification
Framework: Next.js (App Router).
Styling: Tailwind CSS.
Animation: Framer Motion (scroll-linked transforms) + HTML5 Canvas (image sequence).
Asset Paths:
Sequence: /public/images/sequence/ (192 frames, JPG).
Static Bottle: /public/images/prime-bottle-static.png (Used for the post-sequence journey).
Naming Convention: Sequence uses ezgif-frame-001.jpg through ezgif-frame-192.jpg.
Deployment: Static Export (output: ‘export’).
2. Project Structure & File Requirements
A. Data Layer (data/product.ts) Create a robust data file. Use these specifics:
Name: Prime Ice Pop
Price: $20.00
Colors: Arctic Blue (#0072BC), Racing Red (#E31C23), White (#FFFFFF).
Static Assets: staticBottle: ‘/images/prime-bottle-static.png’, finalTagline: ‘THE ULTIMATE FREEZE. HYDRATE NOW.’
Specs: 10% Coconut Water, 834mg Electrolytes, 250mg BCAAs, Zero Sugar.
Story Sections (Overlays for sequence):
The Arctic Blast.
Triple Flavor Threat.
Zero Sugar. Pure Fuel.
Post-Sequence Content Sections:
Hydration Specs: Detailed breakdown of electrolytes.
Athlete Tested: Performance benefits.
B. Configuration
next.config.mjs: Enable output: ‘export’ and images: { unoptimized: true }.
tailwind.config.ts: Add custom colors (primeBlue, primeRed) and ‘Bebas Neue’ font.
C. Core Components & Logic
components/HeroCanvas.tsx (Phase 1 – The Sequence):
A sticky container (h-[600vh]).
Loads and draws the 192 JPG frames onto Canvas based on scroll progress.
Must handle pre-loading and responsive object-fit: contain.
components/TravelingBottle.tsx (Phase 2 – The Journey):
Crucial Logic: This component renders the static /images/prime-bottle-static.png.
It stays hidden until the HeroCanvas sequence finishes.
Once the user scrolls past the canvas section, this bottle becomes position: fixed.
Use Framer Motion’s useScroll relative to the remaining page content to drive complex transforms:
Movement: As the user scrolls through the “Post-Sequence Content Sections,” the bottle should professionally rotate slightly, zoom in/out gently, and translate horizontally (zigzagging slightly across the text content).
The Landing: As the user reaches the final footer section, the bottle must smoothly transition to a center-stage position, stop moving, and settle just above the final tagline.
components/TextOverlays.tsx: High-impact text layers for the initial canvas phase.
components/Navbar.tsx: Glassmorphism header with a “$20 BUY NOW” gradient button.
components/PostSequenceContent.tsx: The standard HTML sections (Specs, Athlete Tested) that the traveling bottle will move over.
D. Page Orchestration (app/page.tsx)
Structure the page order: Navbar -> HeroCanvas (w/ TextOverlays) -> TravelingBottle (The connector) -> PostSequenceContent -> FinalCTA/Footer.
Ensure smooth transitions between the finished canvas state and the taking over of the static traveling bottle. The handoff must be seamless.
Global background color should transition from Blue to Red down the page.
3. Execution
Generate the complete, error-free code for all necessary files. The animation of the static bottle in Phase 2 must feel premium, weighted, and synchronized with the scrolling of the text sections it passes.
Refactor & Polish Command: High-DPI, Centered UI, and Bottle Scaling
Objective: Fix visual quality, scroll pacing, text alignment, and the “Traveling Bottle” scaling issues across the existing codebase.
1. Fix Canvas Quality & Pacing (HeroCanvas.tsx or equivalent):
- Pacing: Increase the main container height to 1400vh to slow down the 192-frame sequence.
- High-DPI: Update the render function to use window.devicePixelRatio. Scale the canvas context by this ratio to ensure the .jpg sequence is razor-sharp.
- Full Screen: Ensure the canvas is fixed inset-0 w-screen h-screen. Use a “Contain” logic in the drawImage function so the bottle is never cropped and stays perfectly centered.
2. Fix Text Overlays (TextOverlays.tsx or page.tsx):
- Alignment: Remove any “one-sided” positioning. Use fixed inset-0 flex items-center justify-center text-center to absolute-center all headlines.
- Styling: Apply font-family: ‘Bebas Neue’ (or a bold Sans-Serif). Use text-7xl md:text-9xl, font-black, and uppercase.
- Readability: Add a subtle text-shadow or drop-shadow-2xl.
- Timing: Use useTransform to ensure text fades in at 0.1, holds until 0.2, and fades out by 0.25. Stagger the 4 sections accordingly across the first 50% of the total scroll.
3. Fix the Traveling Bottle (TravelingBottle.tsx):
- Scaling: Hard-limit the static PNG bottle. Set its container to max-h-[55vh] and w-auto. It should not overwhelm the screen.
- Visibility Handoff: Ensure the static bottle is opacity: 0 during the first 50% of the scroll (the sequence phase). It must smoothly fade to opacity: 1 exactly when the canvas sequence ends.
- Movement Path: As it travels through the lower content sections, apply a “Floating” animation:
- Scroll 0.6 -> 0.8: Rotate slightly (-10deg) and move 20% to the left.
- Scroll 0.8 -> 0.95: Rotate (+10deg) and move to the right.
- Final: Settle at scale-110 in the center for the CTA.
4. Global Polish (globals.css & layout.tsx):
- Background: Implement a background gradient transition from #0072BC (Arctic Blue) to #E31C23 (Racing Red) based on the total scrollYProgress.
- Clean UI: Hide all scrollbars and ensure overflow-x-hidden is applied to the html and body tags.
Please update all affected files now to reflect these high-fidelity changes.
Once all the working functionality is achieved then we can beautify the page by arranging the texts or buttons in place, in our case the object is bottle image which movies from section to section, we can rearrange its positioning by simply prompting
after image sequence all the remaining sections heading text should be white, background colors of eactions should be darker shades of red so the text should be readable, the png image initially should be on right side rather than center, then it should shift to left then on final section the bottle should stop at center and heading should be more at bottom like at very bottom
in final section, let the bottle stop in center, currently its going till bottom of screen, in that way the heading of last section will be fully visible. also add one buy now button in white color at the very end below last heading, dont change headings position. also the button on navbar should be white
5 : Final Touches
hero section is perfect now, lets focus on remaining sections, first of all the background color must be lighter, close to white, use it it for all remaining sections. all the text headings and cards should be darker toned for contrast.
next the bottle png should be on right side initially, like if each section has two columns so one column should hold text and the other side should hold bottle.so the bottle should travel to come to next section to the right side, then again to left in last section.
now in last section dont keep such big heading, keep it similar to other texts like in previous sections and shif it to right side along with button. keep them in similar style like other sections
the movement of bottle should be professional and smooth. in final section it should stop at fully visible position.
begin the bottle png animation in the starting from edge, currently its going from center to right edge first, which feels too much motion, so skip that initial positioning of center, strat from right edge only so it will not create so much aggressive motion.
make the backgroung color of sections to #FBF6F6
6 : Responsiveness
Mobile Readability Refactor: Typography & Contrast
Objective: Adjust text overlays and content sections to ensure 100% readability on mobile devices without changing the overall site structure.
1. Responsive Font Scaling (TextOverlays.tsx):
- Dynamic Sizes: Update headlines to use a fluid scale. Replace static large text classes with text-5xl sm:text-7xl md:text-9xl.
- Line Height: Set leading-[0.9] for headlines to keep the aggressive, sporty look of the brand while preventing lines from overlapping on narrow screens.
- Safe Zones: Add px-8 to all text containers to ensure words never touch the physical edge of the mobile screen.
2. Visual Clarity & Contrast:
- Enhanced Shadows: Apply drop-shadow-[0_5px_15px_rgba(0,0,0,0.5)] to all white headlines. This ensures the text “pops” regardless of whether the bottle or ice splash behind it is bright or dark.
- Background Dimming: If the text is still hard to read against the sequence, add a subtle, fixed radial gradient overlay (from transparent in the center to 40% black at the edges) that only activates on mobile.
3. Text-to-Bottle Handoff:
- Vertical Positioning: On mobile (max-width: 768px), shift text overlays slightly higher (top-[20%]) so they sit above the thickest part of the bottle sequence.
- Traveling Bottle Scale: In TravelingBottle.tsx, ensure the static PNG shrinks to max-h-[35vh] on mobile so it doesn’t obscure the informational text sections as the user scrolls.
4. Content Section Padding (InfoSections.tsx):Increase vertical spacing on mobile to py-24 and ensure body text uses text-lg with leading-relaxed for easy reading on small displays.