Pixel Scan Field is a high-performance WebGL typography effect that transforms standard text into an illuminated field of reactive grid particles. Sweeping light, cursor trails, and customizable shader presets give hero sections and display typography a futuristic, digital aesthetic.
GPU-Accelerated Particle Field: Converts text into dynamic, multi-layered pixel blocks powered by WebGL shaders.
Interactive Cursor Trail: Leaves an organic trail of light particles across the text grid as visitors move their mouse.
16 Built-In Shader Presets: Includes themed color palettes like Cyber, Matrix, Vaporwave, Aurora, Neon, Gold, Sunset, and more.
Keyboard & Touch Accessible: Triggers center-glow illumination on tab focus and direct mobile touch.
Performance Optimized: Features automatic offscreen pausing (IntersectionObserver), dynamic pixel-ratio capping for mobile devices, and static preview rendering for Framer Canvas and SSG exports.
Everything is fully configurable directly from Framer’s right-hand property panel:
Text & Font — Rasterize any custom word or custom typography family into WebGL.
Presets or Custom Styling — Toggle between 16 ready-to-use color themes or fine-tune your own primary accents, base colors, and text tones.
Sweep Direction — Choose how light scans across the grid: Horizontal, Vertical, Radial, or Diagonal.
Motion & Field Settings — Adjust animation speed, scan width, particle intensity, and cursor glow radius.
Quality Modes — Switch between Low, Medium, and High DPR scaling to balance visual fidelity and performance on lower-end devices.
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
Pixel Scan Field is a high-performance WebGL typography effect that transforms standard text into an illuminated field of reactive grid particles. Sweeping light, cursor trails, and customizable shader presets give hero sections and display typography a futuristic, digital aesthetic.
GPU-Accelerated Particle Field: Converts text into dynamic, multi-layered pixel blocks powered by WebGL shaders.
Interactive Cursor Trail: Leaves an organic trail of light particles across the text grid as visitors move their mouse.
16 Built-In Shader Presets: Includes themed color palettes like Cyber, Matrix, Vaporwave, Aurora, Neon, Gold, Sunset, and more.
Keyboard & Touch Accessible: Triggers center-glow illumination on tab focus and direct mobile touch.
Performance Optimized: Features automatic offscreen pausing (IntersectionObserver), dynamic pixel-ratio capping for mobile devices, and static preview rendering for Framer Canvas and SSG exports.
Everything is fully configurable directly from Framer’s right-hand property panel:
Text & Font — Rasterize any custom word or custom typography family into WebGL.
Presets or Custom Styling — Toggle between 16 ready-to-use color themes or fine-tune your own primary accents, base colors, and text tones.
Sweep Direction — Choose how light scans across the grid: Horizontal, Vertical, Radial, or Diagonal.
Motion & Field Settings — Adjust animation speed, scan width, particle intensity, and cursor glow radius.
Quality Modes — Switch between Low, Medium, and High DPR scaling to balance visual fidelity and performance on lower-end devices.
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
