Light Rays

PreviewCode

Ambient glow

Light Rays

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

@/demos/LightRaysDemo.tsx

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

export function LightRaysDemo() {
  return (
    <div class="relative h-125 w-full overflow-hidden rounded-lg border">
      <div class="
        relative z-10 flex h-full flex-col items-center justify-center gap-4
        px-6 text-center
      "
      >
        <span class="
          text-xs font-semibold tracking-[0.35em] text-slate-800/60 uppercase
          dark:text-slate-200/60
        "
        >
          Ambient glow
        </span>
        <h1 class="
          text-4xl font-bold text-foreground
          md:text-5xl
        "
        >
          Light Rays
        </h1>
        <p class="
          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

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

bun

bunx shadcn@latest add @magicui-solid/light-rays

yarn

yarn dlx shadcn@latest add @magicui-solid/light-rays

npm

npx shadcn@latest add @magicui-solid/light-rays

Usage

import { LightRays } from '@/components/magicui/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.
class	string	undefined	Additional class names applied to the wrapper.
style	object	undefined	Inline styles merged into the wrapper.

Original:

magicui.design/docs/components/light-rays