Explode Text On Scroll (Matter.js)
What it does
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.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis, split-type, matter-js |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 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 color as the background), its words progressively light up in red as you scroll, then the highlighted keywords turn white — and at 60% of the pinned scroll they **shatter into individual characters that fall and bounce on the floor with real Matter.js physics**. Scrolling back up reverses everything and re-assembles the text.
## Tech
Vanilla HTML/CSS/JS with ES module imports (Vite-style npm imports). Use:
- `gsap` (npm) plus the GSAP plugin `ScrollTrigger` (register it with `gsap.registerPlugin(ScrollTrigger)`).
- `lenis` (npm) for smooth scroll.
- `split-type` (npm, the `SplitType` class) to split the paragraph into words.
- `matter-js` (npm) for the physics simulation (use `Engine`, `Runner`, `World`, `Bodies`, `Body`, `Events`).
No images and no canvas rendering — Matter.js runs headless and drives DOM spans via CSS transforms.
Wire Lenis into GSAP the standard way:
- `lenis.on("scroll", ScrollTrigger.update)`
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.