Scroll parallax hero with three image cards fanning out on scroll
Scroll parallax hero template for photo app and gallery landing pages where three stacked image cards fan out as the user scrolls, with a caption that fades in once the cards spread. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A scroll-animated hero where three image cards start stacked at the center of the screen and fan outward as the user scrolls through the section. The left card translates left and rotates counter-clockwise. The right card translates right and rotates clockwise. The center card stays in place but shrinks slightly and fades to reveal it is behind the other two. A short heading stays above the card stack throughout. A caption fades in once the cards begin to spread. The animation is slow and deliberate, giving users time to take in each card. Photo apps, gallery platforms, and any product that wants to present multiple images without a carousel or JavaScript animation framework use this pattern.
Common questions about this template
How do I change the images on each card?
Ask your vibe coding tool to update the src attribute on the three img elements inside the .card divs. The three cards use classes .one, .two, and .three. Use different images on each card to visually differentiate them when they fan out. Any aspect ratio works since object-fit: cover fills the card.
How do I change the spread angle and distance?
Ask Bolt, Claude Code, Replit, or Lovable to update the multipliers on the .one and .two transform values. The default spreads cards 19vw apart and rotates them 9 degrees. Increase the 19vw value to spread the cards further apart, or increase the 9deg value to rotate them more dramatically.
How do I change the heading and caption?
Ask your vibe coding tool to update the text inside the h1 in .heading and the text in .caption. The caption opacity is driven by the --p custom property so it fades in as the cards fan out. Change the caption to describe what the spread of images represents for your product.
Use this AI coding template for
- ·Photo app and gallery platform landing pages where showing multiple images in a fan spread communicates the breadth of the product
- ·Creative portfolio pages that want a scroll-driven multi-image hero built through vibe coding with no external libraries
- ·Consumer app pages where three distinct use cases or visual styles need to be presented in a single animated hero section