Photon Beam

A background component with animated photon beams and light trails. It renders moving lines with color variations and glowing effects. Use it to create dynamic visual backgrounds for web interfaces.

byMudunuri bhaskara karthikeya varma from Eldoraui

Installation

terminal

pnpm dlx layro-cli add @karthikmudunuri/photon-beam

npx layro-cli add @karthikmudunuri/photon-beam

npx layro-cli add @karthikmudunuri/photon-beam

bunx layro-cli add @karthikmudunuri/photon-beam

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

Code

Demo

"use client"

import { useEffect, useRef } from "react"
import * as THREE from "three"
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"

interface Signal {
  mesh: THREE.Line
  laneIndex: number
  speed: number
  progress: number
  history: THREE.Vector3[]