Browse components
Web Threads
A spider web of silk threads swaying in a breeze; the cursor stretches them and they ripple as they spring back.
Web Threads
Installation
npx shadcn@latest add @glint-ui/web-threadsFirst 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/web-threads.json
Usage
import { WebThreads } from "@/components/ui/web-threads";
<div className="relative h-96">
<WebThreads spokes={18} rings={16} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spokes | number | 18 | Number of radial threads. |
| rings | number | 16 | Rings between hub and edges. |
| color | string | "#a1a1aa" | Idle silk color. |
| activeColor | string | "#67e8f9" | Color of stretched, vibrating threads. |
| radius | number | 140 | Px radius the cursor pushes within. |
| speed | number | 1 | Ambient breeze speed. |
| className | string | — | Extra classes for the root element. |