Beams Background

Shaders 226

About

Canvas-driven animated light beams with chromatic aberration and scanline overlays designed for futuristic dark-mode hero sections.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Beams Background to your project and fits it to your theme.

Code

How Beams Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import HolographicBeams from "@/components/ui/beams-background";

export default function HologramDemo() {
  return (
    <div className="relative w-full h-screen font-sans bg-black overflow-hidden flex items-center justify-center">
      {/* THE COMPONENT */}
      <HolographicBeams 
        density={15}      // Number of pillars
        speed={1.5}       // Movement speed
        aberration={3}    // Intensity of RGB shift
        opacity={90}      // Brightness
      />

      {/* CENTERED HEADING */}
      <h1 className="relative z-30 -translate-y-8 px-4 text-center text-5xl sm:text-7xl md:text-8xl lg:text-9xl font-semibold tracking-tight bg-clip-text text-transparent bg-gradient-to-b from-white via-white/90 to-white/30 drop-shadow-[0_0_35px_rgba(255,255,255,0.25)] select-none">
        Calmness in design
      </h1>
    </div>
  );
}