# Silk Lines

> Dozens of fine lines flowing like a length of silk in two colours, parting gently around the pointer.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/silk-lines

## When to use it

Premium heroes for fashion, finance, design studios and launch pages: movement with the softness of fabric.

## How it works

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.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/silk-lines` after adding their registry token from https://motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas and vignette are hidden from assistive tech.
- **Reduced motion: Pass.** With reduced motion on, it draws one still frame and ignores the pointer. It also stops drawing off screen.
- **Colour contrast: Partial.** Lines stay under 30% opacity, but they cross the middle: check text over the brightest folds, or lower the amplitude.