Beams
beamsRenders flowing volumetric light columns with noise, shading, and film grain.
Usage
Basic usage
Put it into the relative container and fill it up. The default oblique beam is chart token.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Beams />
</div>Intensive vertical light curtain
rotation=0 vertical, raise beamNumber, narrow beamWidth to form a dense light curtain.
<Beams beamNumber={20} beamWidth={1.4} rotation={0} speed={3} />Customized light color
lightColor passes any CSS color, beamWidth widens to create a warm orange wide beam.
<Beams
lightColor="oklch(0.78 0.18 55)"
beamNumber={8}
beamWidth={3}
rotation={20}
scale={0.3}
/>Pure and particle-free (wallpaper grade)
noiseIntensity=0 Remove grain, slow down, and serve as a supporting background for the content.
Hulian component library
Enterprise-grade · High quality · Native-ready
<Beams noiseIntensity={0} speed={1} beamNumber={14} rotation={35} />When to Use
Use it when you need a cool, deep oblique volumetric light background (technical product Hero, dark landing page). If you want regular dot matrix/grid shading, use DotPattern / GridPattern; if you want oil swirls, use Balatro; Beams is a strip-shaped flowing light curtain that emphasizes the sense of direction and film texture, and is suitable for the main visual background.
Import
import { Beams } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| beamNumber | number | 12 | Number of vertical beam bands; 4–24 is recommended, since high values blur together on lower-end devices |
| beamWidth | number | 2 | Relative width of each beam; higher values leave narrower gaps |
| speed | number | 2 | The speed of the beam flowing along the axis; 0 = static (still retains the static texture) |
| lightColor | string | --color-chart-1 | Beam color, CSS color string, default theme token light and dark adaptive |
| noiseIntensity | number | 1.75 | Grain noise intensity, simulated film texture; 0 = pure and grain-free |
| scale | number | 0.2 | Noise scale; lower values stretch the waves, while higher values create finer detail |
| rotation | number | 30 | Rotation angle of the entire set of beams (degrees); 0 = vertical, positive value clockwise oblique |
| className | string | — | Class name forwarded to the root container, which includes absolute inset-0 z-0 |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static content rendered without WebGL (overlaid on top of the gradient) |
Usage Guidelines
- WebGL client rendering: the effect depends on OGL and WebGL. SSR renders the static-gradient
fallback; do not mount realtime logic directly in a server component. - The token color must be prefixed with `--color-`:
lightColorThe CSS variable must be passed with the full name ofvar(--color-chart-1), and the barevar(--chart-1)does not resolve. See [[hulian-token-color-var-needs-color-prefix]]. - Values of
beamNumberabove 24 blur together and increase GPU cost on lower-end devices. - 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.14 0.02 255)" }}>
<Beams
beamNumber={12}
beamWidth={2}
speed={2}
scale={0.2}
rotation={30}
noiseIntensity={1.75}
/>
</div>