Light rays

Volumetric rays pour from an edge; the pointer steers the beam and casts a shadow.

element
webgl
pointer
background
light
hero
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Light rays example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<axi0-light-rays cover></axi0-light-rays>

import { LightRays } from "./motion/react/LightRays";

<LightRays />

<script setup lang="ts">
import LightRays from "./motion/vue/LightRays.vue";
</script>

<template>
  <LightRays />
</template>

const fx = document.createElement("axi0-light-rays");
document.querySelector("#hero").append(fx);

The wrappers: LightRays.tsx (React, TypeScript) and LightRays.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`color`	auto	the light's color (warm white, orange on light pages)
`origin`	`top`	the edge the light comes from
`spread`	`0.85`	how wide the beam opens, in radians
`speed`	`1`	how fast the rays shimmer
`cover`	`false`	fill the nearest positioned parent, behind its content

Decorative: the canvas is hidden from screen readers and takes no pointer events. It starts when it comes near the screen and draws only while on screen in a visible tab. Reduced motion: one still frame. Without WebGL a soft glow stands in.

Size

light-rays.js is 1.6 KB gzip, with gl.js 2.1 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.