Flow Lines
Pro
Thin sine lines that flow and twist together like a ribbon of silk.
Go with the flow
Customize
28
60px
1
#ff784f
Installation
Flow Lines is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy flow-lines.tsx into components/ui and run npm install motion.
Usage
import { FlowLines } from "@/components/ui/flow-lines";
<section className="relative h-[600px] bg-ink-950">
<FlowLines lines={28} amplitude={60} color="#ff784f" />
</section>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| lines | number | 28 | Number of lines in the ribbon. |
| color | string | "#ff784f" | Line color as a hex value. |
| amplitude | number | 60 | Height of the waves in pixels. |
| speed | number | 1 | Drift speed multiplier. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion