---
title: "ScrollMorph — Framer component · Best of Framer"
description: "$19.00 · Framer component · by Hamim Reza · Sections. Scroll morphing image hero with phases."
canonical: "https://framer.elliotli.dev/component/scrollmorph"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ScrollMorph

# ScrollMorph

Scroll morphing image hero with phases.

[View on Framer](https://framer.com/marketplace/components/scrollmorph/?via=elliot-li)

![ScrollMorph preview image 1](https://framer.elliotli.dev/og/component/scrollmorph/14df0a6c6493532e/1600x1200.jpg)

## Summary

Scroll morphing image hero with phases.

## Description

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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ptoroypl-R0xvIv2brGZRn1mLxwotP0CWwkv3Ff)

## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #5200

## Details

- **Author**: Hamim Reza
- **Price**: $19.00
- **Published**: 2026-04-16
- **Updated**: 2026-04-27
- **Added**: 2026-04-13
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes