Dozens of fine lines flowing like a length of silk in two colours, parting gently around the pointer.
Smooth as silk
Customize
Usage
import { SilkLines } from "@/components/motionkit/silk-lines";
<SilkLines
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</SilkLines>Motion
The exact curves this component runs, plotted with Motion's own maths.
Flow
Runs on its own
Premium heroes for fashion, finance, design studios and launch pages: movement with the softness of fabric.
Each line is a path across the canvas following two slow sine waves, with its phase shifted slightly from its neighbours, so the bundle twists rather than marching in step. Colours blend from the first to the second down the bundle, and the middle lines are brightest, like light on the crest of a fold; the canvas adds overlapping lines together so crossings glow. Near the pointer, lines lift away along a Gaussian falloff.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string] | ["#5FAEB4", "#A56D5B"] | The two colours, top line to bottom. |
| lines | number | 42 | Number of lines. |
| amplitude | number | 0.6 | How far the lines swing, 0 to 1. |
| speed | number | 1 | Flow speed. 0 holds them still. |
| interactive | boolean | true | Part around the pointer. |
| children | ReactNode | — | Your content, layered above. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/silk-lines. It saves the file to components/motionkit and installs its dependencies.
Silk Lines is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws one still frame and ignores the pointer. It also stops drawing off screen.
Infinite Perspective Grid
A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel.
Constellation
Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.
Dot Wave
A sea of dots on a 3D plane rolling in slow waves to the horizon, swelling up around the cursor.
Smooth as silk
Customize
Usage
import { SilkLines } from "@/components/motionkit/silk-lines";
<SilkLines
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</SilkLines>Motion
The exact curves this component runs, plotted with Motion's own maths.
Flow
Runs on its own
The live preview is free to explore. Plus unlocks the source for Silk Lines and every other premium component.