Component Overview
Text Pile Scatter is a playful physics text component built with Matter.js. Each non-space character becomes its own letter body, so the text can fall, collide, pile up, and come back together with a more natural physical feel.
Key Features
Text breaks into individual physics-based letters
Letters drop, collide, and settle into a floor pile
Letter pile can rebuild into readable text
Scatter and rebuild can each be triggered by hover or click
Supports mixed interactions, such as hover to rebuild and click to scatter
Built with Matter.js for real-time gravity, collision, and pile behavior
Works with custom text, including \n line breaks
Designed for playful hero sections and interactive text moments
Customizable Options
Font, size, weight, line height, and letter spacing
Letter color
Text alignment
Text block width
Assembled text position
Scatter trigger: hover or click
Rebuild trigger: hover or click
Snap strength for how quickly letters reform
Gravity strength
Spread amount for how far letters scatter
Damping / air resistance for the falling motion
Purchase Includes
Ready-to-copy component install URL
Instruction and demo file
Inline notes for guidance
Lifetime access & updates
Refund Policy
All sales of digital products are final and non-refundable. If you have any questions about a product, please contact us at play@sosotar.com before completing your purchase. We are happy to help.
SOSOTAR
