Vertical Grid Lines

Vertical Grid Lines A lightweight decorative background component that renders evenly spaced vertical lines with subtle animated traveling segments.

Vertical Grid Lines A lightweight decorative background component that renders evenly spaced vertical lines with subtle animated traveling segments. Small glowing elements move along each line, creating a refined matrix-inspired motion effect without distracting from foreground content. Built for modern landing pages, hero sections, and product showcases. Overview Vertical Grid Lines displays a fixed grid of vertical 1px lines across a container. On each line, a single animated segment travels up or down with randomized timing and opacity. The result is a quiet, ambient motion layer that adds depth while remaining unobtrusive. Designed to function as a background layer that sits behind content. How it works Lines are distributed evenly using flex layout with consistent spacing Each line can host one animated segment at a time Segments animate vertically using smooth y-axis transitions When a segment completes its path, it respawns after a randomized delay if looping is enabled Internal state is managed with a Map keyed by line index to ensure controlled rendering and performance Property controls All settings are exposed via Framer property controls for full customization. Layout Theme: light or dark Line count Line width Direction: down, up, or randomized Colors Line color Segment color Segment styling Segment height Minimum opacity Maximum opacity Timing Loop toggle Minimum duration Maximum duration Minimum respawn delay Maximum respawn delay Effects Pulse effect for subtle opacity oscillation Jitter for slight horizontal movement Glow using box shadow Gradient mask to fade segments at top and bottom edges Technical details Uses absolute positioning with inset 0 to fill the parent container pointerEvents set to none so interactions pass through Gradient edge masks are configurable and theme-aware Respects prefers-reduced-motion and disables animation when required Proper timeout cleanup using a managed reference set to prevent leaks

Subtle animated vertical grid background