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
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
