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
Jirei
