127+ Primitives
Text Mask Grid
TextLarge kinetic typographic heading masked to a retro flickering canvas grid. The animated grid is only visible within the letterforms, powered by inline SVG viewBox mask data URIs, hardware GPU composite blending, and Framer Motion entrance physics.
SVG MaskFramer MotionCanvasA11y ReadyCSS Supports
High-performance developer primitives for the modern responsive web.
Sample Words:
Color:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/text-mask-grid.json"
Props
TypeScript props supported by <TextMaskGrid />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Brand" | Text string revealed through the flickering grid letterforms. |
| fontSize | string | "clamp(4rem, 18vw, 16rem)" | Responsive CSS font size string for the fallback heading. |
| fontWeight | number | string | 800 | Font weight of the letterforms in the SVG mask. |
| fontFamily | string | "Inter Tight, system-ui, -apple-system, sans-serif" | Font family for the vector letterforms. |
| color | string | "currentColor" | Color string for the flickering grid squares. |
| squareSize | number | 4 | Dimension of each square cell in CSS pixels. |
| gridGap | number | 5 | Spacing between adjacent cells in CSS pixels. |
| flickerChance | number | 0.35 | Probability of each square flickering per second [0..1]. |
| maxOpacity | number | 0.4 | Maximum opacity ceiling for the grid squares. |
| stagger | boolean | false | Enables staggered entrance animation for individual letters. |
| className | string | undefined | Additional Tailwind CSS classes merged into container. |
Key Features
- Vector SVG mask data URI with scalable viewBox coordinate space for infinite sharpness at any screen resolution.
- Hardware-accelerated GPU masking: applies single-pass alpha composite blending over an active HTML5 2D canvas.
- Framer Motion entrance physics: smoothly transitions from blur(12px), scale 0.96, and opacity 0 with gentle 1.02 hover spring elasticity.
- Semantic accessibility: uses role='img' and aria-label so screen readers cleanly announce the word once without parsing canvas artifacts.
- Automatic CSS mask-image fallback: degrades gracefully to Tailwind's bg-clip-text gradient when mask-image is unsupported.
- Optional staggered letter entrance variant to reveal individual glyphs in sequence.
Keyboard & Accessibility
- Includes role='img' and aria-label matching the text string for assistive technologies.
- Respects prefers-reduced-motion media query by bypassing viewport blur-in transitions.
- Non-interactive canvas marked pointer-events-none to prevent event hijacking.