Background Beams

A stunning visual component featuring multiple light beams that traverse the container path, creating an elegant, high-tech background atmosphere.

Installation

npx raya-ui@latest add background-beams

File Structure

your-project

components

background-beams

BackgroundBeams.vue

API Reference

Props

colorFrom

string

"#18CCFC"

The starting color hex code of the beam's trailing gradient.

colorMid

string

"#6344F5"

The center point color hex code of the beam gradient.

colorTo

string

"#AE48FF"

The end/exit color hex code of the beam gradient.

duration

number

10

The base duration in seconds for a beam to complete its traversal.

Raya UI

Raya (Persian: رایا) means Thought and Vision. Precision-engineered UI primitives for the modern web.

npx raya-ui@latest add

Settings

Traversal Duration10s

Beam Palette

Start

Midpoint

End

source-code.vue

<script setup lang="ts">
import { BackgroundBeams } from '@/components/ui/background-beams'
</script>

<template>
  <div class="relative w-full h-[40rem] rounded-xl bg-background overflow-hidden flex items-center justify-center">
    <div class="relative z-10 text-center">
      <h1 class="text-7xl font-bold tracking-tighter">Traverse</h1>
    </div>
    <BackgroundBeams />
  </div>
</template>