Light Rays
Volumetric shafts fanning out of a point and drifting. Install with npx remotion-ui@latest add light-rays.
PrimitivePrimitives
$ npx remotion-ui@latest add light-raysA full-frame stage layer of god rays.
import { LightRays } from "@/remotion/primitives/light-rays";
<AbsoluteFill>
<LightRays originX={28} originY={-14} angle={20} spread={56} />
<YourScene />
</AbsoluteFill>Where it sits
Shafts, not blobs — mesh-gradient-bg owns blobs. And full-frame, unlike
light-sweep-text, which is a specular pass clipped to letterforms.
Set backgroundColor="transparent" to lay it over footage instead of over its
own plate.
Why it does not look printed
Each shaft is a tapered wedge composited on screen, so overlapping shafts add
the way light does instead of stacking alpha and going muddy. Width, brightness
and sway period are all hashed per index: an evenly spaced, evenly bright fan
reads as a printed sunburst rather than as light in air. An odd rayCount
avoids a symmetric seam down the middle of the fan.
Aiming it
originX / originY are percentages of the frame and are usually outside it —
the default puts the source above the top edge. angle points the fan, spread
is its total width in degrees, and bloom is the halo at the source.
Motion
There is no entrance: every shaft sways on its own period and the fan drifts on
a longer one. speed scales all of it, and speed={0} freezes the fan into a
still image, which is occasionally what a poster frame wants.
Keep blur moderate. A heavy blur swallows the sway — the first cut of this
component moved one to two degrees under an 18px blur and measured as a still
frame on the preview audit.
Tapered wedges on `screen`, with width, brightness and sway period hashed per index — an even fan reads as a printed sunburst. Background layer, so it has no entrance.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/light-rays- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: backgroundColor, color, rayCount, spread, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { LightRays } from "@/remotion/primitives/light-rays";
<AbsoluteFill>
<LightRays originX={28} originY={-14} angle={20} spread={56} />
<YourScene />
</AbsoluteFill>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#080810" | Plate behind the rays. `transparent` layers them over footage. |
| color | string | "#e8b86d" | Colour of the shafts. |
| rayCount | number | 11 | How many shafts. Odd counts avoid a symmetric seam down the middle. |
| spread | number | 52 | Total fan angle, in degrees. |
| angle | number | 22 | Direction the fan points. 0 points straight down. |
| originX | number | 26 | Source position in percent of the frame. Usually outside it. |
| originY | number | -12 | Source position in percent of the frame. |
| intensity | number | 1 | Overall brightness. |
| speed | number | 1 | Sway speed. 0 freezes the fan into a poster frame. |
| blur | number | 13 | Softness of a shaft's edge, in px. A heavy blur swallows the sway. |
| bloom | number | 42 | Bloom radius at the source, in percent. 0 removes it. |