Beams Upstream

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

Loading...

Installation

npx shadcn@latest add @scrollxui/beams-upstream 

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.