Radial Lines

Heroes 42

About

The component generates the specified number of lines with rotation angles, all using inline styles. You can customize the line count, colors, thickness, positioning, and container properties.

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

Code

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

Usage.tsx

import { RadialLines } from "@/components/ui/radial-lines";

export default function DemoOne() {
  return ( 
    <div className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border bg-lime-700">
      <RadialLines 
        lineCount={100}
        lineColor="#fff200"
        lineThickness={1}
        opacity={1} 
      />
      <span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
        Radial Lines
      </span>
    </div>  
  )
}