---
title: "ReactiveTextGrid — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Heyuhm · Text. 3-in-1 Interactive Reactive Text Grid"
canonical: "https://framer.elliotli.dev/component/reactivetextgrid"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ReactiveTextGrid

# ReactiveTextGrid

3-in-1 Interactive Reactive Text Grid

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

![ReactiveTextGrid preview image 1](https://framer.elliotli.dev/og/component/reactivetextgrid/d034a39e974cf03b/1600x1200.jpg)

## Summary

3-in-1 Interactive Reactive Text Grid

## Description

### Overview

The **Reactive Text Grid** is a high-impact typographic component that transforms static text into a responsive field of motion. Unlike standard grids, this component offers three distinct interaction modes—**Compass, Attract, and Repel**—allowing you to create diverse visual experiences ranging from subtle guidance to playful physics.

### Key Features

-   **3 Distinct Interaction Modes:**
    
    -   **Compass:** Each character rotates to "point" towards your cursor, creating a magnetic tracking effect.
        
    -   **Attract:** Characters are physically pulled toward the cursor, creating a "gathering" animation.
        
    -   **Repel:** Characters push away from the cursor, acting like a physical barrier or a splash effect.
        
-   **Spring Physics:** Built-in $stiffness$ and $damping$ ensure smooth, organic transitions without jitter.
    
-   **Infinite Text Looping:** Input any string (e.g., "DIGITAL"), and the component automatically tiles it to fill the entire grid area.
    
-   **Customizable Density:** Easily adjust the number of columns and rows (up to 50x50) to create either a readable message or a dense texture.
    

### How to Use

1.  **Select Your Mode:** Choose between **Compass, Attract, or Repel** in the property panel to define the core behavior.
    
2.  **Set Your Message:** Enter your text in the **Text** field. The grid will repeat this text automatically.
    
3.  **Adjust Physics:** \* For **Attract/Repel**, use the **Radius** to set the area of influence and **Strength** to control the intensity of the movement.
    
    -   For **Compass**, use **Invert Compass** to flip the rotation logic (pointing toward or away).
        
4.  **Refine Layout:** Use **Grid Gap** and **Columns/Rows** to match your design's whitespace and density requirements.
    

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

-   All · #4377

## Details

- **Author**: Heyuhm
- **Price**: $5.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-27
- **Added**: 2026-05-15
- **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