ScrollMorph

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.

Features

• 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

Animation Phases

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

Property Controls

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

Technical Details

• 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

Default Settings

• 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"

Use Cases

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