Home

Library

Code Components

Search a component or section

Last updated on:

Updated on:

August 19, 2026

Copy code

Scattered Text Grid Animation for Framer

Scatter any Framer headline into a grid of squares that flee your cursor and spring back. Free code component with font, color and physics controls.

...

Variants:

Theme:

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Copy the Scattered Text Grid component and paste it onto your Framer canvas.
Unable to copy? Sign in and try again.
Feel free to copy this component from the Framer Marketplace.
Set the Width to Fill and the Height to a Fixed value (200px to 300px is recommended), then type your word or short phrase into the Text field. Hover and see the magic.

Open the Font control to pick any family from Framer's font library, plus weight, size, tracking, and line height; the canvas grid is rebuilt from these exact metrics.
Toggle Fit width on to shrink the text so it never overflows its box, or off to render it at the exact size you set.
Use the Tag control (H1–H4, Paragraph) to set the real, screen-reader-visible heading level the word is emitted as underneath the canvas, useful for keeping one true H1 per page.
Pick Accent and Base colors, or bind them to your project's color styles so the glow follows light and dark mode.

Dot & Gap - The size of each square and the spacing between them; smaller and tighter reads more like solid type, larger and looser looks more pixelated.
Reach & Push - How far the pointer's influence extends and how hard the squares are shoved away from it.
Return & Damping - How quickly scattered squares spring back to their home position and how much the motion settles versus overshoots.
Bleed - Extra canvas room around the text so squares flung outward stay visible instead of getting clipped.
Idle wave - A slow ambient ripple through the grid when nobody is hovering, so the heading never sits fully still.

Preview to see the effect. The canvas shows a static frame by design; press Preview (or publish) and move your cursor over the text to scatter it, or click for a ripple pulse.
Check out more components like this on our main collection page (All code components).
If you need the full React code file of this component, sign in and copy the code.

Where to use?

The following niches and sections are the strongest placements for this scattered text grid heading.

Site type	Where to use it?
Design agencies & studios	Hero section - Turn a bold headline into an interactive moment visitors want to sweep their cursor across.
Portfolios	Name or title reveal - Give a personal brand headline a tactile, playful first impression.
SaaS & product landing pages	Feature or pricing section titles - Add motion to a section header without competing with the content below.
Music, film & events	Teaser and drop pages - Scatter a release name or date behind a glowing, cursor-reactive grid.
Fashion & e-commerce	Campaign or lookbook intro - Match an editorial, kinetic-type aesthetic on a drop page.
Coming soon & 404 pages	Full page - One bold interactive effect carries a short, mostly-empty page on its own.
Awwwards-style experimental sites	Signature scroll moment - A lightweight canvas effect with no WebGL cost.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Scattered Text Grid Animation for Framer

Scatter any Framer headline into a grid of squares that flee your cursor and spring back. Free code component with font, color and physics controls.

...

Variants:

Theme:

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Copy the Scattered Text Grid component and paste it onto your Framer canvas.
Unable to copy? Sign in and try again.
Feel free to copy this component from the Framer Marketplace.
Set the Width to Fill and the Height to a Fixed value (200px to 300px is recommended), then type your word or short phrase into the Text field. Hover and see the magic.

Open the Font control to pick any family from Framer's font library, plus weight, size, tracking, and line height; the canvas grid is rebuilt from these exact metrics.
Toggle Fit width on to shrink the text so it never overflows its box, or off to render it at the exact size you set.
Use the Tag control (H1–H4, Paragraph) to set the real, screen-reader-visible heading level the word is emitted as underneath the canvas, useful for keeping one true H1 per page.
Pick Accent and Base colors, or bind them to your project's color styles so the glow follows light and dark mode.

Dot & Gap - The size of each square and the spacing between them; smaller and tighter reads more like solid type, larger and looser looks more pixelated.
Reach & Push - How far the pointer's influence extends and how hard the squares are shoved away from it.
Return & Damping - How quickly scattered squares spring back to their home position and how much the motion settles versus overshoots.
Bleed - Extra canvas room around the text so squares flung outward stay visible instead of getting clipped.
Idle wave - A slow ambient ripple through the grid when nobody is hovering, so the heading never sits fully still.

Preview to see the effect. The canvas shows a static frame by design; press Preview (or publish) and move your cursor over the text to scatter it, or click for a ripple pulse.
Check out more components like this on our main collection page (All code components).
If you need the full React code file of this component, sign in and copy the code.

Where to use?

The following niches and sections are the strongest placements for this scattered text grid heading.

Site type	Where to use it?
Design agencies & studios	Hero section - Turn a bold headline into an interactive moment visitors want to sweep their cursor across.
Portfolios	Name or title reveal - Give a personal brand headline a tactile, playful first impression.
SaaS & product landing pages	Feature or pricing section titles - Add motion to a section header without competing with the content below.
Music, film & events	Teaser and drop pages - Scatter a release name or date behind a glowing, cursor-reactive grid.
Fashion & e-commerce	Campaign or lookbook intro - Match an editorial, kinetic-type aesthetic on a drop page.
Coming soon & 404 pages	Full page - One bold interactive effect carries a short, mostly-empty page on its own.
Awwwards-style experimental sites	Signature scroll moment - A lightweight canvas effect with no WebGL cost.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Library overview

Framerstacks hosts one of the largest collections of pre-built Framer components and website sections. With 200+ professionally designed components and 800+ variants.

Our library spans 40+ webpage section categories, enabling creators to build beautiful, high-performance websites in Framer faster than ever.

Explore the main library page.

Contribution

Have something creative on your mind? Or wish to become a contributor inside Framerstacks?

You're welcome. Join as a contributor and help to shape the future of the high-quality Framer components and sections gallery. Head over to the submission page and contribute.