---
title: "Text Pile Scatter — Framer component · Best of Framer"
description: "$10.00 · Framer component · by SOSOTAR · Text. Component Overview Text Pile Scatter is a playful physics text component built with Matter.js."
canonical: "https://framer.elliotli.dev/component/text-pile-scatter"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Pile Scatter

# Text Pile Scatter

Text that drops, piles, and rebuilds.

[View on Framer](https://framer.com/marketplace/components/text-pile-scatter/?via=elliot-li)

![Text Pile Scatter preview image 1](https://framer.elliotli.dev/og/component/text-pile-scatter/5f179bbb19d91acf/1600x1200.jpg)

## Summary

Component Overview Text Pile Scatter is a playful physics text component built with Matter.js.

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3106

## Details

- **Author**: SOSOTAR
- **Price**: $10.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-08
- **Added**: 2026-05-27
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing