Spotlight lens hero with scroll-driven circular image reveal
Scroll-driven spotlight lens hero template for photography tool and camera app landing pages where a circular lens sweeps left to right revealing the image as the user scrolls. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A scroll-triggered spotlight hero where the image is hidden behind a white veil and revealed progressively through a circular lens that sweeps from left to right as the user scrolls through the section. The lens creates a spotlight circle against the white background. As the lens moves right, the white veil pulls back with it, expanding the revealed image area in a coordinated sweep. A headline and scroll prompt appear in the white area to the left and fade out once the reveal is mostly complete. Photography tools, camera apps, and portfolio sites use this template to make uncovering the image feel like part of the product experience itself.
Common questions about this template
How do I change the background image?
Ask your vibe coding tool to update the background-image URL on both the .image and .lens elements. Both must point to the same image so the lens appears to reveal what is already there. Use a high-resolution image for best quality through the circular lens.
How do I change the lens size?
Ask Bolt, Claude Code, Replit, or Lovable to update the width value on the .lens element. The default is min(42vw, 520px). Increase to 60vw for a larger reveal area or decrease to 28vw for a tighter spotlight effect. The aspect-ratio: 1 keeps it circular at any size.
How do I change the headline and scroll prompt?
Ask your vibe coding tool to update the text inside the h1 and p elements inside the .copy div. The copy fades out at 72 percent scroll progress. Change the 0.72 threshold in the scroll listener to control when the text disappears.
Use this AI coding template for
- ·Photography tool and camera app landing pages where the image reveal itself demonstrates the product
- ·Portfolio and creative agency pages that want a unique hero interaction without animation libraries
- ·Photo editing and visual AI tool pages built with Bolt, Claude Code, Replit, or Lovable that need a cinematic entry