MovingLines Background

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

Loading...

Installation

npx shadcn@latest add @scrollxui/movinglines-background 

Usage

import { MovingLinesBackground } from '@/components/ui/movinglines-background';
<MovingLinesBackground className='relative h-100 w-full flex flex-col items-center justify-center'>
  <h2 className='bg-clip-text text-transparent text-center bg-linear-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

Loading...

API Reference

MovingLines Background

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

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.
blur-smstring"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.