Radar
radarCombines rings, spokes, a rotating sweep, and pointer parallax into a radar display.
Usage
Basic usage
The default main color is chart token, and the background color is transparent; placed in the relative container, it comes with absolute inset-0 z-0.
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Radar />
</div>Dense ring · Double flap quick scan
ringCount/spokeCount Control ring and spoke density, sweepLobes=2 Two beams of symmetrical scanning arms at the same time.
<Radar ringCount={16} spokeCount={16} sweepSpeed={1.8} sweepLobes={2} />Customize the main color
color Pass any CSS color to overwrite the default token, brightness brightens the entire disk.
<Radar color="oklch(0.78 0.16 165)" brightness={1.4} scale={0.45} />Wide scan arm · No spokes
spokeCount=0 Remove the spokes, sweepWidth widen the scanning beam, turn off the mouse parallax to make a pure static background.
<Radar
spokeCount={0}
sweepWidth={1}
sweepSpeed={0.8}
enableMouseInteraction={false}
/>When to Use
A dynamic background that requires the atmosphere of a technology/surveillance/command center, the rotation of the scanning arm is a metaphor for "real-time detection." Use DotPattern / GridPattern for regular geometric lattices/line networks; use Ripple for single-point concentric diffusion waves; Radar is the only "radar dish" in this family with rotating scanning arms + concentric rings + spokes.
Import
import { Radar } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 1 | Overall animation speed factor (ring wave diffusion + scan arm shared base time), mapped GLSL uSpeed |
| scale | number | 0.5 | View scale: lower values enlarge and crop the disk; higher values shrink it and leave more margin |
| ringCount | number | 10 | The number of concentric rings, the larger, the denser |
| spokeCount | number | 10 | Number of spokes (radial dividers), 0 = no spokes |
| ringThickness | number | 0.05 | The thickness of the concentric ring lines, the larger, wider and softer |
| spokeThickness | number | 0.01 | Spoke line thickness |
| sweepSpeed | number | 1 | Scan arm rotation speed |
| sweepWidth | number | 2 | Scanning arm width (power sharpness), the larger, narrower and sharper |
| sweepLobes | number | 1 | Number of scanning arm flaps, 1 = single beam / 2 = symmetrical double beam |
| color | string | var(--color-chart-1) | Radar main color (ring/spoke/scan arm), any CSS color string |
| backgroundColor | string | — | Radar background color (resident base color), default transparent to reveal the host background |
| falloff | number | 2 | Edge-attenuation exponent; higher values keep the center focused and fade the edge faster |
| brightness | number | 1 | Overall brightness ratio |
| enableMouseInteraction | boolean | true | Whether to turn on mouse parallax (the disk moves smoothly with the pointer) |
| mouseInfluence | number | 0.1 | Mouse parallax influence coefficient |
| className | string | — | Passthrough to the root container (or fallback div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL (default radial gradient decoration div) |
Usage Guidelines
- Requires client-side rendering (WebGL/ogl), the component comes with
"use client"; when placing it into the RSC page, make sure it is hung in the client subtree or dynamic import. - The container needs to have its own positioning +
overflow-hidden, and the component will cover the parent withabsolute inset-0; the radar disk will not be visible when the parent has no size. - Reduced-motion and non-WebGL environments render the static
fallback; do not use the scanning arm to communicate essential information.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Radar
scale={0.5}
ringCount={10}
spokeCount={10}
sweepSpeed={1}
sweepLobes={1}
brightness={1}
enableMouseInteraction={true}
/>
</div>