About Vertical Grid Lines
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
