Browse components
Ghost Fibers
Translucent glowing fibers that braid, drift apart and fade in and out like ghostly silk.
Ghost Fibers
Installation
npx shadcn@latest add @glint-ui/ghost-fibersFirst 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/ghost-fibers.json
Usage
import { GhostFibers } from "@/components/ui/ghost-fibers";
<div className="relative h-96 bg-black">
<GhostFibers fibers={9} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#8be9fd","#b69cff","#ff9ad5"] | One color per bundle (up to three). |
| fibers | number | 9 | Fibers per bundle. |
| glow | number | 1 | Halo strength. |
| spread | number | 1 | How far fibers drift apart. |
| speed | number | 1 | Animation speed. |
| className | string | — | Extra classes for the root element. |