Scroll effect

Explode Text On Scroll (Matter.js)

by Vanguardia · motionprompts.dev

A pinned sticky paragraph whose highlighted keywords progressively recolor as you scroll, then shatter into individual characters that fall and bounce under Matter.js physics. Driven by a scrubbed GSAP ScrollTrigger timeline that toggles gravity past 60% progress and syncs each character element to its physics body via an afterUpdate transform.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.1–2s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: mixed
Easing: power2
Complexity: 5/5
Pinned: yes
Reduced motion: handled
Libraries: gsap, ScrollTrigger, SplitType, lenis, matter-js

pinned 400vh scrubbed word-colour sweep (two shuffled, randomly scattered phases) that at progress 0.6 flips Matter.js gravity from 0 to 1, un-statics every glyph body and kicks it with a random impulse (vx ±2.5, vy 0..-5, spin ±0.125 rad/s) so the letters tumble and bounce (restitution 0.75, friction 0.5, frictionAir 0.0175) onto a static floor at the viewport bottom; scrolling back up re-statics, re-seats and re-fades everything

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,752 charsCustomize

# Explode Text On Scroll (Matter.js physics)

## Goal

Build a scroll-driven text effect: a full-screen pinned paragraph starts invisible (text is the same colo…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.