Grid Text Reveal

Bring your typography to life with Grid Text Reveal, a highly customizable, physics-driven Framer component. It slices any text into an interactive grid of squares that dynamically scatter and reassemble as users scroll down your page.

Key Features:

• Physics-Based Animation: Utilizing Framer Motion, the text squares organically float into their proper alignments with buttery-smooth spring physics and sequential staggering.

• Flawless Gradients & Borders: Fully style the scattered square pieces with solid colors, gorgeous gradients, and adjustable borders without ever corrupting or squishing your typography layout.

• Perfect SEO & Accessibility: Unlike canvas-based text effects, this component leaves a perfectly structured, selectable, and screen-reader-friendly text element in the DOM once the animation finishes.

• Breakpoint Ready: Includes a built-in disable toggle so you can easily turn off the effect for mobile visitors while keeping it active on desktop.

Customization Options:

• Full native Font, Size, and Color controls

• Grid Density (Rows & Columns)

• Scatter Distance (X & Y Axis) and Rotation

• Cell Backgrounds (Solid or Gradient with Start/End/Angle)

• Border Styling (Width, Radius, Color, Style)

• Detailed Timing Controls (Speed, Delay, Stagger Gaps)

• "Keep Cells Visible" option for permanent aesthetic borders

• Canvas Preview Modes for effortless static styling