About
Pixel Matrix is an interactive, high-performance typography grid component that transforms custom text into a responsive grid of illuminated, reactive pixels. Dynamic bloom effects, ambient breathing pulses, sparkle highlights, and interactive lighting sweep over display text to deliver a futuristic, digital aesthetic for modern hero sections.
What it does
Hardware-Accelerated Canvas Engine: Rasterizes text into an adaptive, multi-layered matrix of dynamic pixel blocks using HTML5 Canvas 2D performance optimizations.
Interactive Lighting & Auto Sweep: Features fluid cursor tracking with organic light wobble, speed-influenced glow expansion, and an automated continuous light sweep mode.
Dynamic Bloom & Sparkle Highlights: Renders real-time radial canvas bloom around illuminated pixels paired with subtle, shimmering sparkle pulses.
Universal CSS Color Resolver: Seamlessly parses OKLCH, OKLAB, HSL, RGB, Hex, and named CSS color formats in real time.
Accessible & Performance Optimized: Includes keyboard focus-in center lighting, automatic tab visibility detection, offscreen pausing via IntersectionObserver, and static fallback rendering for Framer Canvas and SSG builds.
What you can customize
Everything is fully configurable directly from Framer’s right-hand property panel:
Text & Typography: Rasterize any custom string and typography family into the pixel matrix.
Color Themes & Presets: Choose from 7 built-in themes (Default, Neon, Cyber, Sunset, Ocean, Mono, Aurora) or define custom base, glow, spark, and background color combinations.
Interaction Modes: Toggle between Pointer follow, Auto Sweep, or None.
Glow & Animation Controls: Adjust light influence radius, animation speed, and breathing frequencies.
Need help?
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
About
Pixel Matrix is an interactive, high-performance typography grid component that transforms custom text into a responsive grid of illuminated, reactive pixels. Dynamic bloom effects, ambient breathing pulses, sparkle highlights, and interactive lighting sweep over display text to deliver a futuristic, digital aesthetic for modern hero sections.
What it does
Hardware-Accelerated Canvas Engine: Rasterizes text into an adaptive, multi-layered matrix of dynamic pixel blocks using HTML5 Canvas 2D performance optimizations.
Interactive Lighting & Auto Sweep: Features fluid cursor tracking with organic light wobble, speed-influenced glow expansion, and an automated continuous light sweep mode.
Dynamic Bloom & Sparkle Highlights: Renders real-time radial canvas bloom around illuminated pixels paired with subtle, shimmering sparkle pulses.
Universal CSS Color Resolver: Seamlessly parses OKLCH, OKLAB, HSL, RGB, Hex, and named CSS color formats in real time.
Accessible & Performance Optimized: Includes keyboard focus-in center lighting, automatic tab visibility detection, offscreen pausing via IntersectionObserver, and static fallback rendering for Framer Canvas and SSG builds.
What you can customize
Everything is fully configurable directly from Framer’s right-hand property panel:
Text & Typography: Rasterize any custom string and typography family into the pixel matrix.
Color Themes & Presets: Choose from 7 built-in themes (Default, Neon, Cyber, Sunset, Ocean, Mono, Aurora) or define custom base, glow, spark, and background color combinations.
Interaction Modes: Toggle between Pointer follow, Auto Sweep, or None.
Glow & Animation Controls: Adjust light influence radius, animation speed, and breathing frequencies.
Need help?
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
