A dark translucent veil of drifting smoke with faint colored light at its edges. The pointer lifts a ragged, glowing tear in it that stretches as it moves.
npx shadcn@latest add https://hyperblur.dev/r/bg-dark-veil.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-dark-veil.tsx.
import { BgDarkVeil } from "@/components/hyperblur/bg-dark-veil"
<div className="relative h-96 bg-black"><BgDarkVeil /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Glow color inside the tear and along its rim. |
| edgeColor | string | "#a64dff" | Second glow color seen through the veil edges. |
| veilColor | string | "#06070a" | Base color of the smoke. Hex only. |
| opacity | number | 0.94 | Opacity of the veil where nothing lifts it, from 0.3 to 1. |
| tearRadius | number | 70 | Size of the tear in pixels. |
| grain | number | 0.04 | Amount of film grain in the smoke. 0 turns it off. |
| speed | number | 1 | Speed of the smoke and the idle drift. |
| children | ReactNode | Content rendered on top of the veil. |