Silk
NewPro
A soft silk sheen: slow folds of light that flow across the surface and lean toward the pointer.
Soft power
Customize
#ff784f
1
1
0°
Installation
Silk is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy silk.tsx into components/ui and run npm install motion.
Usage
import { Silk } from "@/components/ui/silk";
<section className="relative h-[600px]">
<Silk color="#ff784f" speed={1} scale={1.2} rotation={20} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Fabric color as a hex value. |
| speed | number | 1 | Flow speed multiplier. |
| scale | number | 1 | Size of the folds. Larger values make broader folds. |
| noise | number | 1 | Film grain amount, from 0 to 2. |
| rotation | number | 0 | Rotation of the fold direction, in degrees. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion