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.
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
Tag label
Title text
Body text
Icon (None, Lightning, Paintbrush, Rocket, Shield, Puzzle, Globe, Star, Heart, Code)
Gradient Word index
Alignment (Center / Left)
Scroll Speed
Show / Hide toggle
Format (Fraction / Dots)
Blur amount
Stagger delay
Speed
Title
Body
Tag
Accent
Counter
Gradient Start
Gradient End
Font family and weight
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au
Aidan Looker
