Light Beams React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import LightBeams from "./LightBeams";

export default function Example() {
  return (
    <LightBeams
      color={"#b5cbe0"}
      background={"#101820"}
      speed={14}
      intensity={0.65}
      angle={-20}
      minHeight={400}
      children={"Make room for light."}
      style={{
        "fontSize": 34,
        "letterSpacing": "-.05em",
        "color": "#edf1f6"
      }}
    />
  );
}

Using Light Beams

Place content in children and set minHeight for the illuminated section. angle determines where the light shafts fall.

Use intensity sparingly behind text. The colour and background props let you keep the effect consistent with a neutral page palette.

Props

Name	Type	Required	Default	Description
color	string	No	"#bdd3e8"	Beam colour.
background	string	No	"#101820"	Background colour.
speed	number	No	14	One-way sweep duration in seconds.
intensity	number	No	.65	Overall beam opacity from zero to one.
angle	number	No	-20	Beam field rotation in degrees.
minHeight	number \| string	No	400	Minimum viewport height in pixels or a CSS length.
children	ReactNode	No	undefined	Optional content above the beams.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.