# Light rays (goodtabs UI)

Soft rays fanning down from above at low alpha, drawn in raw WebGL behind a heading.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/light-rays.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/light-rays`

## Usage

```tsx
import { LightRays } from "@/components/ui/light-rays"

<LightRays className="grid h-96 place-items-center">
  <h2>One light, from above</h2>
</LightRays>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| origin | `number` | `0.5` | Where the light sits along the top edge, from 0 at the left to 1 at the right. |
| spread | `number` | `38` | Half the angle of the fan, in degrees. |
| speed | `number` | `1` | Multiplies how fast the shafts shift. |

## When to use

- A hero that should feel lit, with the heading under the light
- A launch or pricing section that needs one moment of atmosphere
- On a dark page, where rays read as light rather than as shade

## When not to use

- Behind body text or dense controls
- On a page with a second light source, such as a glow behind a product shot
- More than two or three times on a page: browsers cap live WebGL contexts near 16

## Notes for agents

- The element needs a height. It fills its box and does nothing to set one
- It installs components/ui/shader-canvas.tsx, which pauses off screen, follows the theme and handles reduced motion
- In the light theme the rays use the dark foreground, so they read as soft shade
- Under reduced motion it draws one frame, and without WebGL a CSS radial glow shows through. No GSAP is involved here

## The maths

- The source sits at 1.34 × height from the bottom, so the fan's width at the top edge is 2 × 0.34 × height × tan(spread).
- Light falls off as e^(-1.9 d), with d the distance from the top edge in heights, so the bottom of the frame keeps about 15 percent.
- Three sine rates, 8.3, 17.1 and 37.7, share no common period, so the shafts never line up the same way twice.

Docs: https://ui.goodtabs.co/components/light-rays