✨ Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Light Rays

A component with animated light rays which shine down from above.

Ambient glow

Light Rays

Drop this component into any container and it will fill the space with softly animated light rays shining from above.

import { LightRays } from "@/registry/magicui/light-rays"

export function Component() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-lg border">
      <div className="relative z-10 flex h-full flex-col items-center justify-center gap-4 px-6 text-center">
        <span className="text-xs font-semibold tracking-[0.35em] text-slate-800/60 uppercase dark:text-slate-200/60">
          Ambient glow
        </span>
        <h1 className="text-foreground text-4xl font-bold md:text-5xl">
          Light Rays
        </h1>
        <p className="max-w-md text-sm text-slate-800/80 md:text-base dark:text-slate-200/80">
          Drop this component into any container and it will fill the space with
          softly animated light rays shining from above.
        </p>
      </div>
      <LightRays />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/light-rays

Usage

import { LightRays } from "@/components/ui/light-rays"

<div className="relative h-[400px] w-full overflow-hidden rounded-xl border">
  <LightRays />
</div>

Props

Prop	Type	Default	Description
`count`	`number`	`7`	Total number of animated rays.
`color`	`string`	`"rgba(160, 210, 255, 0.2)"`	Base colour used for the gradients.
`blur`	`number`	`36`	Pixel radius applied to the blur filter.
`opacity`	`number`	`0.65`	Maximum opacity that rays reach (0 – 1).
`speed`	`number`	`14`	Average seconds each ray takes to complete a cycle.
`length`	`string \| number`	`"70vh"`	CSS length for the ray height.
`className`	`string`	`undefined`	Additional class names applied to the wrapper.
`style`	`React.CSSProperties`	`undefined`	Inline styles merged into the wrapper.

Lens Line Shadow Text

On This Page

Installation Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers