MovingLines Background

A set of diagonal lines that move continuously. Great for hero backgrounds.

Moving Lines,
Background.

flowing right, defining direction.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/movinglines-background.json

Usage

import { MovingLinesBackground } from "@/components/ui/movinglines-background";
<MovingLinesBackground  className="relative h-[400px] w-full flex flex-col items-center justify-center">
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        Moving Lines, <br /> Background.
      </h2>
      <p className="max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center">
       flowing right, defining direction.
      </p>
    </MovingLinesBackground>

Examples

Direction

Moving Lines,
Background.

flowing left, rewriting direction.

API Reference

BackgroundPaths

The BackgroundPaths component renders a animated moving lines that adapts seamlessly to light and dark themes.

Props

PropertyTypeDefaultDescription
speedstring"20s"
The **duration** of the line movement animation (e.g., '10s', '30s').
opacitynumber0.8
The **transparency** level of the moving lines layer (from 0 to 1).
direction"left" | "right""right"
The **direction** in which the lines move, affecting the background-position calculation.
blurstring"0px"
The CSS **blur value** (e.g., '2px', '5px') applied to the moving lines to create a soft, diffused effect.
classNamestring—
Optional **styling** (e.g., Tailwind classes) for the **outer container** (`div`).
lineClassNamestring—
Optional **styling** (e.g., Tailwind classes) for the **moving line element** (`motion.div`).
childrenReact.ReactNode—
The **content** to be rendered **above** the moving background.

Built withby Ahdeetai.