background-rainbow-lines

Animated multi-color background lines, inspired by EU flag colors. Built with React and motion.

Install

npm install background-rainbow-lines motion

Usage

import { BackgroundRainbowLines } from "background-rainbow-lines";

export default function Hero() {
  return (
    <BackgroundRainbowLines className="flex min-h-screen items-center justify-center">
      <h1 className="text-white text-6xl font-bold">Your headline</h1>
    </BackgroundRainbowLines>
  );
}

Requires "use client" in Next.js App Router (already included in the component).

Props

| Prop | Type | Default | Description | |-------------------|--------------|-----------------------------------|-------------------------------------------| | children | ReactNode | - | Content rendered above the lines | | className | string | - | Classes applied to the outer container | | backgroundColor | string | "#060608" | Background color behind the lines | | colors | string[] | EU-flag-inspired palette | Custom line color palette | | lineCount | number | 24 | Number of animated lines |

License

MIT