A scroll-driven hero where images animate through four distinct phases — scatter, line, circle, and arc — with spring physics, flip card interactions, and mouse parallax. Two content text sections fade in and out as phases transition. Built for creative portfolios, brand presentations, and landing pages that need an unforgettable hero experience.
Four animation phases — scatter, line, circle and arc
Scroll-driven phase transitions with smooth spring physics
Virtual scroll system with configurable maximum distance
3D flip card on hover — reveals back of each image card
Mouse parallax — subtle horizontal movement following cursor
Full touch gesture support for mobile devices
Intro text fades out as arc forms
Content text fades in when arc is fully formed
Up to 30 images supported
Configurable image card width and height
Full typography controls for all four text elements
Independent color controls for all text sections
Responsive — mobile breakpoint at 768px
Static renderer detection skips animations on export
No dependencies
Scatter — images appear randomly positioned across the canvas with varied rotations
Line — images align horizontally in a straight line
Circle — images arrange into a circular formation
Arc — images morph into a bottom rainbow arch that users scroll through
Images
Image array — up to 30 images · source and alt text per image
Scroll
Max Scroll — virtual scroll distance (1000–5000px)
Image Dimensions
Image Width — card width (40–150px)
Image Height — card height (60–200px)
Styling
Background — component background color
Text Content
Intro Title · Intro Subtitle
Content Title · Content Description
Typography
Title Font · Subtitle Font · Content Title Font · Content Description Font
Colors
Intro Title Color · Intro Subtitle Color
Content Title Color · Content Description Color
Framer Motion spring animations for all phase transitions
Virtual scroll with bounded range and wheel and touch event support
ResizeObserver for efficient container size tracking
Memoized scatter positions prevent recalculation on re-render
Mouse parallax via mousemove event with smooth interpolation
Arc radius and spread angle adapt for mobile viewport
startTransition for non-blocking React 18 state updates
Static renderer detection disables animations on export
20 sample images · 3000px max scroll
60px image width · 85px image height
Light background #FAFAFA
Intro title — "The future is built on AI."
Intro subtitle — "SCROLL TO EXPLORE"
Creative portfolio hero sections · Brand presentations · Product launch pages · Interactive photo galleries · Agency homepages · Visual storytelling landing pages · AI and tech company sites
SEO Keywords
framer scroll hero · framer morphing gallery · framer hero animation · framer scroll animation · framer image morphing · framer hero component · framer scroll gallery · framer interactive hero · framer spring animation · framer image animation · framer creative hero · framer landing page hero · framer scroll interaction · framer code component · framer hero gallery
Hamim Reza
