Browse components
Swirl
A psychedelic paint swirl in two bold colors outlined with ink, with an optional chunky-pixel mode. WebGL.
Swirl
Installation
npx shadcn@latest add @glint-ui/swirlFirst 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/swirl.json
Usage
import { Swirl } from "@/components/ui/swirl";
<div className="relative h-96">
<Swirl pixelated pixelSize={5} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color1 | string | "#ff4b3e" | First paint color. |
| color2 | string | "#1f7ae0" | Second paint color. |
| color3 | string | "#0f1a24" | Ink color outlining the swirls. |
| speed | number | 1 | Flow speed multiplier. |
| scale | number | 1 | Zoom; higher means larger swirls. |
| twist | number | 1 | Spiral twist around the center. |
| pixelated | boolean | false | Render in chunky pixels. |
| pixelSize | number | 5 | Pixel size in px when pixelated. |
| className | string | — | Extra classes for the root element. |