---
title: "Scattered Grid Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Rishad · Text. More components Check our main collection page to get more components just like scattered grid text."
canonical: "https://framer.elliotli.dev/component/scattered-grid-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scattered Grid Text

# Scattered Grid Text

Animated Typography

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

![Scattered Grid Text preview image 1](https://framer.elliotli.dev/og/component/scattered-grid-text/e4ff0ca5ed4d50a3/1600x1031.jpg)

## Summary

More components Check our main collection page to get more components just like scattered grid text.

## Description

### About

Turn any word into a living field of tiny squares. Move your cursor through the text and the dots scatter away, spring back with a soft glow, and ripple outward on click. A tactile, playful headline effect for main headings of the pages on your Framer site.

### **Features**

-   Full Framer Font control - any family, weight, size, tracking, line height.
    
-   Fit-to-width auto-scaling or fixed size.
    
-   Tunable physics: reach, push force, return speed, damping.
    
-   Optional idle "breathe" wave when the cursor is away.
    
-   Accent + base colors, theme-token aware (light/dark auto-adapts).
    
-   Choose the semantic tag (H1–H4, paragraph), real text stays in the DOM for SEO and screen readers, canvas is purely decorative.
    
-   Responsive at any layout size.
    

Drop it into a hero, footer, or empty state and get an interactive, accessible, performance-tuned kinetic-type effect with zero extra setup.

**Note**: Set the width to Fill and height to 300px (Fixed), hover and experience the magic.

Get a full [guide](https://www.framerstacks.com/library/scattered-text-grid-animation-for-framer) to set up this component on your Framer site.

### More components

Check our [main collection page](https://www.framerstacks.com/library/components/code-components) to get more components just like scattered grid text.

### Support

Get in touch with us: [hello@framerstacks.com](mailto:hello@framerstacks.com)

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

-   All · #1775

## Details

- **Author**: Rishad
- **Published**: 2026-08-19
- **Updated**: 2026-08-19
- **Added**: 2026-08-19
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos