Browse components
Strands
A curtain of hanging verlet ropes that sway in a soft breeze and part around the cursor.
Strands
Installation
npx shadcn@latest add @glint-ui/strandsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/strands.json
Usage
import { Strands } from "@/components/ui/strands";
<div className="relative h-96">
<Strands count={56} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 56 | Number of hanging strands. |
| length | number | 0.72 | Strand length as a fraction of the container height. |
| segments | number | 20 | Rope segments per strand. More is smoother. |
| color | string | "#c6ff3d" | Strand color. |
| tipColor | string | "#22d3ee" | Color at the tips. |
| thickness | number | 1.5 | Line width in px. |
| sway | number | 1 | Strength of the idle breeze. |
| radius | number | 90 | Px around the cursor that pushes strands aside. |
| className | string | — | Extra classes for the root element. |