Beams Upstream

Multiple background beams travel upstream, forming a hero section background.

Dare to Dream Big

Every great journey starts with a single step. Push past fear, chase your vision, and turn your dreams into reality. The world doesn't wait—why should you?

Installation

npx shadcn@latest add https://scrollxui.dev/registry/beams-upstream.json 

Usage

import { BeamsUpstream } from "@/components/ui/beams-upstream";
<div className="relative h-screen w-full">
  <div className="relative z-10 flex flex-col items-center justify-center h-full">
    <h1 className="text-5xl font-bold text-white">Welcome to Upstream</h1>
    <p className="mt-4 text-neutral-300">
      Flow with energy and creativity, powered by animated SVG beams.
    </p>
  </div>
  <BeamsUpstream className="z-0" />
</div>

API Reference

Beams Upstream

Multiple background beams travel upstream, forming a hero section background.

Props

PropertyTypeDefaultDescription
classNamestring-
Optional Tailwind or custom class names to style or position the beams container.

Built withby Ahdeetai.