Circuit Grid
A zero-latency, HTML5 Canvas background engine for technical interfaces. Simulates structured data flow for engineering, AI, and SaaS portfolios.
Make it with Workshop
Build your own component with AI
A zero-latency, HTML5 Canvas background engine for technical interfaces. Simulates structured data flow for engineering, AI, and SaaS portfolios.
Make it with Workshop
Build your own component with AI
The Visual Logic Circuit Grid brings a technical, engineering-inspired data effect to your Framer projects. Unlike generic particle effects that float randomly, this component simulates a structured network. Particles travel along strict grid coordinates and execute logical 90-degree turns at intersections, mimicking the flow of data through a PCB or server network.
It creates a "System Intelligence" aesthetic that feels engineered and precise, rather than chaotic.
Key Features
Generative Motion: Creates an infinite, non-repeating flow of data packets.
System Logic: Particles follow a logic system (move, turn, stop) to create a "living system" look.
Responsive: Automatically scales density and grid size for Mobile, Tablet, and Desktop.
Theme Ready: Supports full transparency for both the grid and particles to blend with any dark or light mode.
Customizable Properties
Grid Color: Adjust the faint background mesh opacity and color.
Dot Color: Set the active data packet color (supports transparency/glows).
Columns & Rows: Define the specific grid dimensions to control layout density.
Density: Control the traffic volume of data packets.
Speed: Adjust flow rate in pixels per frame (0.5 = Slow Drift, 10 = Turbo).
Dot Size: Increase for visibility or decrease for subtlety.
Where to Use
AI & Machine Learning Landing Pages.
Cyber Security Dashboards.
Engineering & SaaS Portfolios.
Hardware Product Showcases.
