ColumnLines

column grid background with radial fade and subtle noise. Great for hero backgrounds.

Loading...

Installation

npx shadcn@latest add @scrollxui/columnlines 

Usage

import { ColumnLines } from '@/components/ui/columnLines-background';
<ColumnLines 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>
</ColumnLines>

API Reference

ColumnLines

column grid background with radial fade and subtle noise. Great for hero backgrounds.

Props

PropertyTypeDefaultDescription
columnWidthnumber80
The width of each column in pixels, controlling the spacing and density.
columnCountnumber14
The total number of columns rendered across the container.
radialFadeStartnumber30
The percentage where the radial fade starts from the center.
radialFadeEndnumber70
The percentage where the columns fully fade out.
opacitynumber1
The overall opacity of the column layer (0 to 1).
showNoisebooleantrue
Enables or disables the noise/grain overlay for visual texture.
noiseOpacitynumber0.05
The intensity of the noise effect (0 to 1).
classNamestring
Optional styling for the outer container (div).
childrenReact.ReactNode
The content rendered above the column background layer.

Built withby Ahdeetai.