---
title: "Vertical Grid Lines — Free Framer component · Best of Framer"
description: "Free Framer component · by Sanna Granqvist · Backgrounds. Vertical Grid Lines A lightweight decorative background component that renders evenly spaced vertical lines with subtle animated…"
canonical: "https://framer.elliotli.dev/component/vertical-grid-lines"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Vertical Grid Lines

# Vertical Grid Lines

Subtle animated vertical grid background

[View on Framer](https://framer.com/marketplace/components/vertical-grid-lines/?via=elliot-li)

![Vertical Grid Lines preview image 1](https://framer.elliotli.dev/og/component/vertical-grid-lines/d5b0482034911dd4/1600x1200.jpg)

## Summary

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

## Description

## 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #680

## Details

- **Author**: Sanna Granqvist
- **Published**: 2026-02-23
- **Updated**: 2026-02-23
- **Added**: 2026-02-17
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background