Scroll Morph Text

What is Scroll Morph Text?

Scroll Morph Text is a scroll-driven content component that presents feature highlights, value propositions, or process steps one at a time in a sticky, full-viewport layout. As the user scrolls, each item morphs into view with a cinematic word-by-word blur and fade cascade, then smoothly transitions to the next. Ideal for landing pages, feature tours, about sections, and product showcases.

Core Features

• Word-by-word blur reveal animation with customisable blur intensity, stagger, and speed

• Gradient-highlighted keyword per item with configurable start and end colours

• Inline SVG icons per item, selectable from 9 built-in options including Lightning, Rocket, Shield, and Code

• Scroll-driven progress line that grows smoothly between items

• Step counter with Fraction or Dots format

• Sequential fade timing across icon, counter, tag, title, and body for a natural reveal

• Premium hover micro-animations on title words and gradient words with lift, glow, and scale effects

• Center or left text alignment

• Custom font support via Framer Font control

Controls inside Framer

Items

• Tag label

• Title text

• Body text

• Icon (None, Lightning, Paintbrush, Rocket, Shield, Puzzle, Globe, Star, Heart, Code)

• Gradient Word index

Layout

• Alignment (Center / Left)

• Scroll Speed

Counter

• Show / Hide toggle

• Format (Fraction / Dots)

Animation

• Blur amount

• Stagger delay

• Speed

Colors

• Title

• Body

• Tag

• Accent

• Counter

• Gradient Start

• Gradient End

Typography

• Font family and weight

Best use cases

• SaaS and startup landing pages to present core features with a premium scroll experience

• Agency portfolios and case study pages to guide visitors through key highlights

• Product launch pages to build anticipation with sequential, cinematic reveals

• About and mission pages to walk users through company values or process steps

Replace static feature grids with an interactive scroll experience that keeps visitors engaged and reinforces a premium brand impression.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au