Text Pile Scatter

Text Pile Scatter
Text Pile Scatter

About Text Pile Scatter

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.

From SOSOTAR

3D Material Text
Ripple Slice Text
Curved Text Pro
Loading Wave Text

Related Components

Image on Text Hover
Split Text Hover
Typing Effect Text
Smart Text Highlight