Browse components
Shape Blur
A soft, glowing outline that snaps into razor focus wherever the cursor comes near. WebGL signed distance fields.
Focus
Installation
npx shadcn@latest add @glint-ui/shape-blurFirst 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/shape-blur.json
Usage
import { ShapeBlur } from "@/components/ui/shape-blur";
<div className="relative h-96">
<ShapeBlur shape="rounded" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "rounded" | "circle" | "nested" | "nested" | Outline shape. |
| color | string | "#c6ff3d" | Outline color. |
| accent | string | "#22d3ee" | Second color the outline shifts toward around its perimeter. |
| size | number | 0.62 | Shape size as a fraction of the shorter side. |
| thickness | number | 2 | Outline width in px when fully sharp. |
| blur | number | 26 | Blur radius in px away from the cursor. |
| focus | number | 170 | Px around the cursor where the outline comes into focus. |
| className | string | — | Extra classes for the root element. |