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.
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.
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
All settings are exposed via Framer property controls for full customization.
Theme: light or dark
Line count
Line width
Direction: down, up, or randomized
Line color
Segment color
Segment height
Minimum opacity
Maximum opacity
Loop toggle
Minimum duration
Maximum duration
Minimum respawn delay
Maximum respawn delay
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
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
Sanna Granqvist
