A cinematic hero section that reveals itself as the user scrolls. Choose between two dramatic effect styles.
Effect Styles
Scale Reveal
The hero starts as a smaller, rounded container and expands to full-width as you scroll.
| Setting | What it does |
|---|
| Initial scale | Starting size: 70–95% (default 85%) |
| Initial radius | Corner rounding: 0–48px (default 24px) |
| Scroll distance | How far to scroll for full reveal: 300–1500px |
Zoom Out
The image starts zoomed in and gradually zooms to normal as you scroll. An overlay fades in during the transition.
| Setting | What it does |
|---|
| Initial zoom | Starting zoom level: 110–180% (default 150%) |
Content Animation
| Option | What it does |
|---|
| Fade out | Content fades away as you scroll |
| Fade in after | Content appears after the expansion completes |
| Slide to bottom | Content smoothly slides to bottom-center during scroll |
Common Settings
| Setting | What it does |
|---|
| Image / Mobile image | Hero images |
| Heading / Subheading | Text content |
| Buttons 1 & 2 | CTA buttons with style options |
| Content position | 9-point grid placement |
| Overlay opacity | 0–100% |
| Color scheme | Scheme 1–5 |
Tips
- Scale reveal works best at 85% scale with 24px radius for a subtle, premium feel
- Zoom out is more dramatic — pair with "Fade in after" content animation
- "Slide to bottom" is universal and works with both effect styles
- The section automatically respects reduced-motion preferences