Light Rays

Soft angled rays of light that sweep slowly across the parent, drawn with CSS only.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

Soft rays

Sweep slowly

import { LightRays } from "@rdloom/react";

export default function LightRaysBasic() {
  return (
    <div className="flex w-full justify-center">
      <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
        <LightRays />
        <div className="relative text-center">
          <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Soft rays</p>
          <p className="text-base text-[var(--rd-color-text-muted)]">Sweep slowly</p>
        </div>
      </div>
    </div>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add light-rays

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

It also adds rdloom-motion.css next to your tokens and imports it from the tokens file, once: no setup, and no inline styles. The plain components you already use are untouched.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/light-rays.json

Works, but without upgrade tracking, and you import the motion CSS yourself.

Usage

import { LightRays } from "@rdloom/react";

<div className="flex w-full justify-center">
  <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
    <LightRays />
    <div className="relative text-center">
      <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Soft rays</p>
      <p className="text-base text-[var(--rd-color-text-muted)]">Sweep slowly</p>
    </div>
  </div>
</div>

Colored

Wide ember rays

A slower, steeper sweep

import { LightRays } from "@rdloom/react";

export default function LightRaysColored() {
  return (
    <div className="flex w-full justify-center">
      <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
        <LightRays color="var(--rd-color-ember-300)" angle={35} duration={20} />
        <div className="relative text-center">
          <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Wide ember rays</p>
          <p className="text-base text-[var(--rd-color-text-muted)]">A slower, steeper sweep</p>
        </div>
      </div>
    </div>
  );
}

Still

Held still

Rays stay where they are

import { LightRays } from "@rdloom/react";

export default function LightRaysStill() {
  return (
    <div className="flex w-full justify-center">
      <div className="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)]">
        <LightRays isStill />
        <div className="relative text-center">
          <p className="text-4xl font-semibold tracking-tight text-[var(--rd-color-text-default)]">Held still</p>
          <p className="text-base text-[var(--rd-color-text-muted)]">Rays stay where they are</p>
        </div>
      </div>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`color` Colour of the rays: any CSS colour or token.	`string`	`"var(--rd-color-ember-400)"`
`angle` Angle of the rays in degrees.	`number`	`20`
`duration` Seconds one sweep takes.	`number`	`14`
`isStill` Stops all movement. Moving content should be stoppable.	`boolean`	`false`

Accessibility

Role presentation, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

Ignored: it is not announced

What your code must do

Pure decoration: aria-hidden, never focusable, and pointer-events none so content on top stays usable
Drawn with CSS gradients only, so it needs no JavaScript and is safe in server HTML
The sweep is slow and soft, with no hard edge crossing the screen
Stands still for visitors who ask for less motion (prefers-reduced-motion), with isStill, and inside an rdm-still container
Nothing flashes more than 3 times a second (WCAG 2.3.1) and moving content can be stopped (WCAG 2.2.2)
Hidden in forced-colors (high contrast) mode so it never fights system colours
Keep text on top at 4.5:1 against the effect: use a low-contrast colour

Guidelines

Use it when

A soft glow behind a hero heading
Adding depth to a dark surface

Avoid it when

Behind small text
On very bright surfaces where the rays disappear

Don't

A saturated colour at full strength behind text
A short duration that makes the light feel restless

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-border-default