Immersive experience with scroll zoom effects and parallax animations.
Background image zooms from scale(1) to scale(3) on scroll while text fades. Creates cinematic effect that immerses visitor in experience.
transform: scale(lerp(1, 3, progress)) via JS scroll Explore Scroll & Parallax →A 300x400px container gradually expands to fill screen. Rounded border disappears, revealing full-screen image with overlaid text.
width/height lerp + borderRadius lerp(20, 0) Explore Scroll & Parallax →A 100px circle expands to fill screen, revealing hidden image. Spectacular transition giving impression of entering the scene.
width/height lerp(100, fullscreen) + border-radius 50% → 0 Explore Transitions →Word grows from scale(1) to scale(8) on scroll with fade in-out. User feels like passing through text, creating memorable moment.
transform: scale(lerp(1, 8)) + opacity fade Explore Scroll & Parallax →Images move in parallax on scroll while text content rises on hover. Double interaction (scroll + hover) that brings gallery to life.
translateY(scrollPercent * 40px) + hover scale(1.1) Explore Scroll & Parallax →Cards transition from scale(0.9) 50% opacity to scale(1) full opacity when entering viewport. Elastic cubic-bezier transition for more character.
transform: scale(0.9 → 1) + cubic-bezier(0.16, 1, 0.3, 1) Explore Transitions →CTA content transitions from scale(0.8) invisible to scale(1) visible on scroll. Title uses white-violet text gradient to conclude with impact.
transform: scale(0.8 → 1) + opacity 0 → 1 Explore Scroll & Parallax →