Scroll image reveal hero with expanding frame and rotating headlines
Apple-style scroll hero template for photo app and portfolio landing pages where an image frame expands from a card to full screen as the user scrolls, with headline phrases that rotate at each scroll stage. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A scroll-driven hero section where the image starts as a rounded card centered on screen and expands to fill the full viewport as the user scrolls through the section. The frame corners smooth away as the image expands, finishing as a seamless full-bleed photograph. Three headline phrases appear centered on the image and rotate in at one third and two thirds of the scroll journey through the section. Each phrase fades and slides up as it enters. Dark gradient overlays at the top and bottom keep the white text readable against any background photo. This Apple-inspired scroll technique is used by photo apps, memory platforms, and any product that wants a hero that comes alive before the user reaches any other section.
Common questions about this template
How do I change the background image?
Ask your vibe coding tool to update the src attribute on the img.art element to point to your image file. Use a high-resolution photo at least 1600px wide. The image uses object-fit: cover so it fills the frame at any size without distortion.
How do I change the three headline phrases?
Ask Bolt, Claude Code, Replit, or Lovable to update the text inside the three h1 elements inside .word divs. Each phrase appears during one third of the scroll journey. Keep each phrase short so it reads cleanly centered over the image.
How do I change when each headline appears?
Ask your vibe coding tool to update the v<.34 and v<.68 threshold values in the scroll listener function. These numbers are the scroll progress fractions (0 to 1) at which the headline switches. Change .34 to .5 to give the first headline more time on screen.
Use this AI coding template for
- ·Photo app and memory product landing pages where a scroll-triggered image reveal creates an immediate product experience
- ·Portfolio and creative studio pages that want a cinematic hero without custom animation libraries
- ·Consumer app launch pages where the hero section needs to tell a three-phase story as the user scrolls