Pixel Scan Field

About

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.

What it does

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

What you can customize

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.

Need help?

Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.