ScrollMorph

Scroll morphing image hero with phases.

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

Scroll morphing image hero with phases.