SCROLL-STOP HERO DELIVERABLE

ASSET GENERATION WORKFLOW:

STEP 1 - PAIR IMAGE PROMPTS:
Image 1 (Assembled state): "Modern logistics platform interface showing organized shipment dashboard, clean UI cards with green status indicators, organized color-coded shipping lanes, professional warehouse background blur. Style: SaaS dashboard aesthetic, morning light, minimal skeuomorphism."

Image 2 (Exploded state): "Same dashboard components and warehouse elements floating and dispersed outward from center point, as if exploding in slow motion. Maintain consistent lighting. Cards, typography, logos all separated and moving outward. Depth layering with foreground/mid/background elements. No blur effect."

GENERATION: Run prompts through 6-image batch. Select pair with highest visual consistency and clean separation.

STEP 2 - TRANSITION VIDEO:
Input: Image 1 (assembled), Image 2 (exploded). Motion prompt: "Smooth 6-second transition. Zoom out 20%, dashboard components scatter outward radially, simultaneous slight counterclockwise rotation. Particles or subtle glow trails during motion. Fade to product tagline and CTA button (appears at 5-second mark). Background warehouse elements remain static."

Output: 1080p MP4, 6 seconds, 30fps. Format for web (compressed to under 8MB).

STEP 3 - HTML INTEGRATION:
<div class="hero-scroll-container">
  <img id="hero-assembled" src="image-1.png" />
  <video id="hero-video" src="transition.mp4" autoplay muted />
  <img id="hero-exploded" src="image-2.png" />
</div>

<script>
window.addEventListener("scroll", () => {
  const scrollPct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  const container = document.querySelector(".hero-scroll-container");
  
  if (scrollPct < 0.15) {
    container.style.opacity = 1;
    heroVideo.currentTime = 0;
    heroVideo.style.display = "none";
  } else if (scrollPct < 0.4) {
    heroVideo.style.display = "block";
    heroVideo.currentTime = (scrollPct - 0.15) / 0.25 * 6; // 6 sec video
    container.style.opacity = 1;
  } else {
    heroVideo.style.display = "none";
    container.style.opacity = 0.9;
  }
});
</script>

RESULT: On page load, users see assembled hero image. As they scroll, video triggers and plays through transition. After 40% scroll depth, exploded image appears. Scroll back up: video reverses. Creates friction-free pause point (scroll-stop) encouraging brief engagement before continuing downpage.