Light Rays

Sun through a window: soft rays from a point on the top edge. For heroes and reveal moments.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add light-rays

Usage

Example

import { LightRays } from "@/components/galactrex/light-rays";

<section className="relative overflow-hidden">
  <LightRays />
  <h1 className="relative">First light</h1>
</section>

Source

Installs to components/galactrex/light-rays.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`rays`	`number`	`14`	How many rays.
`origin`	`number`	`50`	Source across the top edge, in %.
`speed`	`number`	`18`	Seconds for one turn back and forth; 0 holds still.
`intensity`	`number`	`0.32`	Ray strength, 0 to 1.
`color`	`string`	`var(--gxui-glow)`	Ray colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Centred. Light from the top centre.
Corner. `origin={10}` for light from one side.

Accessibility

Decorative only and aria-hidden; never takes pointer events.

Motion and reduced motion

Transform-only rotation of one layer.
Still offscreen.
Reduced motion: still rays.