Light Rays

Renders animated light rays using WebGL shaders. Displays rays with customizable colors, intensity, and animation speed. Suitable for background effects with dynamic lighting and visual depth.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/light-rays

npx layro-cli add @xxtomm/light-rays

npx layro-cli add @xxtomm/light-rays

bunx layro-cli add @xxtomm/light-rays

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useRef, useEffect, useMemo, useState, type CSSProperties } from "react";
import * as THREE from "three";

interface AnimationConfig {
  animate: boolean;
  speed: number;
}

interface SingleColorConfig {
  mode: "single";
  color: string;
}