Full-screen image reveal hero with scroll-driven frame expansion
Full-screen scroll reveal hero template for creative studio and visual brand landing pages where a rounded image expands to fill the viewport as the user scrolls. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A full-screen image reveal hero for visual products and creative brands. The image frame starts as a small rounded card and expands to cover the full screen as the user scrolls, with corner radius smoothing to zero at full expansion. Three headline phrases rotate in at one third and two thirds of the scroll journey, each appearing centered over the image. The template uses no external animation libraries and works with any background image. Furniture brands, design studios, and premium consumer product companies use it for an Apple-style cinematic reveal built entirely through vibe coding.
Common questions about this template
How do I change the image?
Ask your vibe coding tool to update the src attribute on the img.art element. Replace it with any image URL or local path. The image uses object-fit: cover so it scales to fill the frame at any size. For best results use a landscape image at 1600px or wider.
How do I add a background overlay to improve text contrast?
Ask Bolt, Claude Code, Replit, or Lovable to add a .shade element inside .frame with position: absolute and inset: 0 and a semi-transparent dark background. This makes white text readable over any bright image without changing the image itself.
How do I change the three scrolling headline phrases?
Ask your vibe coding tool to update the h1 text inside each .word div. There are three phrases that rotate at 34 and 68 percent scroll progress through the section. Use short two-line headlines for the cleanest visual result.
Use this AI coding template for
- ·Creative studio and design brand landing pages that want a full-screen image reveal without animation frameworks
- ·Furniture, architecture, and premium product pages where the hero image IS the product experience
- ·Consumer brand landing pages built with vibe coding tools that need an Apple-style cinematic entrance