Light Beams

Abstract

Neon rays crossing a bright center hotspot, slowly rotating like a lens flare.

Usage

Install: three @react-three/fiber @react-three/drei

Drop <LightBeams /> inside your own <Canvas>.

Mood: Radiant, energetic, abstract. Pure light as a subject.
Colors: Five additive neon rays (cyan, magenta, violet, amber, pink) over a white-hot center. Heavy bloom halo.
Motion: The whole fan of beams rotates slowly around the hotspot.

View component source

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import type { Group } from 'three';

const BEAMS = [
  { rot: 0, color: '#22e0ff' },
  { rot: Math.PI / 5, color: '#ff2fd0' },
  { rot: (2 * Math.PI) / 5, color: '#8a5cff' },
  { rot: (3 * Math.PI) / 5, color: '#ff8a3d' },
  { rot: (4 * Math.PI) / 5, color: '#ff5db1' },
];

export default function LightBeams({ scale = 1 }: { color?: string; scale?: number }) {
  const g = useRef<Group>(null);
  useFrame((state) => {
    if (g.current) g.current.rotation.z = state.clock.elapsedTime * 0.15;
  });
  return (
    <group ref={g} scale={scale}>
      {BEAMS.map((b, i) => (
        <mesh key={i} rotation={[0, 0, b.rot]}>
          <planeGeometry args={[0.09, 7]} />
          <meshBasicMaterial
            color={b.color}
            transparent
            opacity={0.55}
            blending={THREE.AdditiveBlending}
            depthWrite={false}
            toneMapped={false}
            side={THREE.DoubleSide}
          />
        </mesh>
      ))}
      {/* bright center hotspot */}
      <mesh>
        <circleGeometry args={[0.18, 32]} />
        <meshBasicMaterial color="#ffffff" transparent opacity={0.9} blending={THREE.AdditiveBlending} depthWrite={false} toneMapped={false} />
      </mesh>
    </group>
  );
}