Threads
Pro
Thin horizontal threads that wave and cross each other, parting as the pointer passes.
Pull the thread
Move through the threads to part them
Customize
40
36px
50px
#ffa585
Installation
Threads is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy threads.tsx into components/ui and run npm install motion.
Usage
import { Threads } from "@/components/ui/threads";
<section className="relative h-[600px] bg-ink-950">
<Threads count={40} amplitude={36} distance={50} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffa585" | Thread color as a hex value. |
| count | number | 40 | Number of threads. |
| amplitude | number | 36 | Wave height in pixels. |
| distance | number | 50 | How far the pointer pushes the threads apart, in pixels. 0 turns it off. |
| speed | number | 1 | Wave speed multiplier. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion