Column Lines

Heroes

About

A decorative column-grid background with radial fade and subtle noise texture, ideal for hero sections behind headline text.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Column Lines to your project and fits it to your theme.

Code

How Column Lines is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ColumnLines } from "@/components/ui/columnlines";

export default function ColumnLinesDemo() {
  return (
    <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>
  );
}