Wave Lines

Thin lines that ripple like silk and part around the pointer.

Wave Lines

Installation#

pnpm dlx shadcn@latest add @balick/wave-lines

Or pass the full URL: https://ui.balick.me/r/wave-lines.json

Usage#

import { WaveLines } from "@/components/ui/wave-lines"

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <WaveLines />
      <h1 className="relative">Flow</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`lines` Number of lines.	`number`	36	Number of lines.
`amplitude` Height of the waves, in pixels.	`number`	28	Height of the waves, in pixels.
`speed` Speed of the waves: 2 is twice as fast.	`number`	1	Speed of the waves: 2 is twice as fast.
`interactive` Let the lines part around the pointer over the parent.	`boolean`	true	Let the lines part around the pointer over the parent.