DarkVeil
dark-veilCreates a dark flowing neural-field backdrop with scanlines, grain, and distortion.
Usage
Basic usage
The default cool dark color curtain can be placed in the relative container to cover it.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 280)" }}>
<DarkVeil />
</div>Hue Shift + Distortion
hueShift Rotating keynote, warpAmount gives the curtain a sense of wave refraction.
<DarkVeil hueShift={120} warpAmount={0.08} speed={0.6} />Retro Monitor
scanline + noise overlay CRT scan lines and film grain texture.
<DarkVeil
hueShift={200}
scanlineIntensity={0.35}
scanlineFrequency={1.6}
noiseIntensity={0.04}
speed={0.4}
/>Wallpaper level (power saving)
Slow + resolutionScale Downsampling saves power and serves as content support background.
Hulian component library
Profound · Restraint · Native Adaptation
<DarkVeil hueShift={60} speed={0.25} resolutionScale={0.6} />When to Use
Use it when you need a deep and restrained dark flowing curtain background (dark landing page, console Hero, immersive cover). If you want multi-color bands, use ColorBends, if you want bright light curtains, use Beams, if you want oil vortexes, use Balatro; DarkVeil is a single dark tone neural field, focusing on deep atmosphere rather than bright colors, and has retro display textures such as scan lines/grains.
Import
import { DarkVeil } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| hueShift | number | 0 | Hue shift (0–360 degrees), YIQ hue rotation to create cool blue/warm purple/turquoise tone |
| noiseIntensity | number | 0 | Grain noise intensity, CRT/film texture; recommended 0–0.1, excessive snowflakes |
| scanlineIntensity | number | 0 | Scan line intensity, retro display look and feel; recommended 0–0.5, need to match the frequency |
| speed | number | 0.5 | Animation speed factor; 0=still (still renders a static frame) |
| scanlineFrequency | number | 0 | Scan line frequency (density); scanlineIntensity > 0 is required to be visible |
| warpAmount | number | 0 | Space distortion amount, UV sine and cosine perturbation produces fluctuations/refraction; recommended 0–0.2 |
| resolutionScale | number | 1 | Rendering resolution scaling; <1 downsampling to save power, >1 oversampling for clarity |
| className | string | — | Forwarded to the root container (or fallback div), comes with absolute inset-0 z-0 |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL (default dark radial gradient) |
Usage Guidelines
- WebGL client rendering + lazy loading: relies on ogl + WebGL, the SSR stage falls back to
fallback(dark radial gradient); do not mount it directly in the server component. - Linkage parameters:
scanlineFrequencymust be matched withscanlineIntensity > 0to be visible;noiseIntensitywill produce snowflakes if it exceeds 0.1. - Performance Knob: Turn down
resolutionScale(such as 0.6) to save power on lower-end devices or when overlaying multiple instances. - The parent container must be
relative+overflow-hidden.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 280)" }}>
<DarkVeil
hueShift={0}
speed={0.5}
warpAmount={0}
scanlineIntensity={0}
scanlineFrequency={0}
noiseIntensity={0}
/>
</div>