5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8a7,

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

Select Your Mode: Choose between Compass, Attract, or Repel in the property panel to define the core behavior.
Set Your Message: Enter your text in the Text field. The grid will repeat this text automatically.
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).
Refine Layout: Use Grid Gap and Columns/Rows to match your design's whitespace and density requirements.

5a:[["$","$L5d",null,{"post":{"id":"019e67b0-b3ed-7f10-8eed-c2ae8780908f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"26e06fff-20fe-48f8-9a80-dbb5f8632355","name":"Heyuhm","slug":"heyuhm","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/231529/avatar-CrKWjR0VqxCEUo30e9HWmcX1tonOTv.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"G47Q6orutTPoIU0kcZOk","resolved":true,"title":"ReactiveTextGrid","body":"$5e","bodyJson":null,"introduction":"3-in-1 Interactive Reactive Text Grid","slug":"reactivetextgrid","author":{"framerUserId":"26e06fff-20fe-48f8-9a80-dbb5f8632355","name":"Heyuhm","slug":"heyuhm","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/231529/avatar-CrKWjR0VqxCEUo30e9HWmcX1tonOTv.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/G47Q6orutTPoIU0kcZOk/reactivetextgrid-WSDIQmWj6u0BW8lhpaMoRMDmRnjzgc","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-15T01:40:44.796Z","updatedAt":"2026-05-27T04:32:43.951Z","publishedAt":"2026-05-27T04:28:14.189Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://crispcomponents.framer.website/reactive-text-grid","price":"5","paymentUrl":"https://heyuhm.lemonsqueezy.com/checkout/buy/1f276bd0-67d8-4f5e-9f71-d6f9bc44ba60","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"EhHGYOQ02yWJMux0b82W","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-27T04:28:14.189Z","updatedAt":"2026-05-27T04:28:14.189Z","reported":false}}],"$L5f"]

Suggested for you