Everything is seed-based: dial in a number, find a layout you love, and it stays locked. Same seed, same city — every time, on every device.Key Features
Procedural grid generation with configurable block size, segment lengths, and corner radius. Roads snap to an invisible city grid, creating the structured-yet-organic feel of a real street map — not random zigzags.
Intersection-aware traffic. Particles detect crossings ahead, brake smoothly, wait for the crossing to clear, then accelerate away. A max-wait timer prevents deadlocks so the flow never freezes. Toggle the entire system on or off with a single switch.
Staggered draw-in animation. Roads animate from the edges on page load — each one starting after a configurable delay — before particles begin to move. Disable it for instant display if the component lives below the fold.
Mobile-optimized automatically. Road count caps at 30, particles at 200, canvas DPR drops to 1.5×, and trail complexity halves — all behind the scenes. No user configuration needed; the component detects the device and adapts. Animation pauses entirely when the browser tab is hidden.
Canvas-rendered, zero dependencies. Pure Canvas 2D — no Three.js, no WebGL context, no external libraries. Minimal footprint, works everywhere Framer ships.
Control the city structure without touching code. Seed locks a specific generated layout — scrub through values to find the perfect one. Block Size sets the underlying grid spacing in pixels (smaller = denser city, larger = open avenues). Min/Max Segment define how many blocks a road travels before turning — low values create compact neighborhoods, high values produce long highways. Corner Radius smooths every 90° turn from sharp right angles down to wide sweeping curves.
Toggle road visibility on or off — hide them entirely to show only floating particles against a dark background. When visible, adjust Line Color and Line Width independently. A separate Glow Color and Glow Width layer sits behind each road — set its alpha above zero to reveal a soft neon underlay beneath the road lines.
Count controls how many particles populate the grid (auto-capped on mobile). Size sets the diameter of each particle head in pixels. Opacity and Glow intensity are independent — push glow to 1.0 for a strong neon bloom, or drop it to zero for clean dots with no halo.
Each particle drags a gradient tail behind it. Length controls how far back the trail extends in pixels. Width sets trail thickness independently from the particle head. Trail Opacity defines the peak brightness at the head — it fades linearly to transparent at the tail end.
Base Speed sets the average particle velocity. Variation randomizes individual speeds around that base — at 0 all particles move identically, at 1.0 the fastest moves roughly 2× the slowest, creating natural-looking flow with overtaking and clustering. Wait at Crossings enables the intersection braking system. Detection Range controls how far ahead a particle starts braking, and Max Wait is the safety valve — after this many seconds a stuck particle forces through to prevent permanent jams.
Five color pickers define the particle palette. Each particle is randomly assigned one color at spawn. Use a monochromatic range for a subtle effect, or contrasting hues for a vivid multicolor flow.
Draw-in Effect makes roads animate from the screen edges on load — each road begins drawing after a Stagger delay (in ms), at a configurable Draw Speed (px/s). Particles only appear on a road after it finishes drawing. Disable the toggle to show everything instantly — useful when the component is placed below the fold or inside a tab that loads later.
Dark hero backgrounds and landing page atmospheres. Data-themed or tech product pages. Network and connectivity visuals. Any section that needs ambient motion without stealing focus from the content above it.
Olexandr Demydov
