Light Rays

A component with animated light rays shining down from above. It renders multiple rays with varying positions, rotations, and intensities. Use it to add a dynamic background effect to a layout.

byMagic UI

Installation

terminal

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

npx layro-cli add @magicuidesign/light-rays

npx layro-cli add @magicuidesign/light-rays

bunx layro-cli add @magicuidesign/light-rays

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

Code

Demo

"use client"

import { useEffect, useState, type CSSProperties } from "react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"

interface LightRaysProps extends React.HTMLAttributes<HTMLDivElement> {
  ref?: React.Ref<HTMLDivElement>
  count?: number
  color?: string
  blur?: number
  speed?: number
  length?: string