Beams Background

​

Overview

​

Installation

npx shadcn@latest add @kokonutui/beams-background

npm install motion

​

Props

​

Usage

​

Basic Usage

import BeamsBackground from "@/components/kokonutui/beams-background";

export default function Page() {
  return <BeamsBackground />;
}

​

Custom Content

import BeamsBackground from "@/components/kokonutui/beams-background";

export default function Page() {
  return (
    <BeamsBackground intensity="medium">
      <div className="relative z-10 text-center">
        <h1 className="text-6xl font-bold text-white">Welcome</h1>
        <p className="text-xl text-white/70">Beautiful animated backgrounds</p>
      </div>
    </BeamsBackground>
  );
}

​

Different Intensities

// Subtle beams - more background, less distraction
<BeamsBackground intensity="subtle" />

// Medium beams - balanced effect
<BeamsBackground intensity="medium" />

// Strong beams - bold, eye-catching effect (default)
<BeamsBackground intensity="strong" />

​

Features

• Canvas Animation: Smooth 60fps canvas-based rendering for optimal performance
• Dark Mode Support: Automatically adjusts colors based on dark/light theme
• Responsive: Adapts to window resizing with proper device pixel ratio handling
• Pulsing Effect: Beams pulse and shimmer for a more organic feel
• Customizable Intensity: Three intensity levels to match your design needs
• Blur Effects: Multiple blur layers create depth and atmosphere
• Color Gradient: HSL-based color system with blue/cyan tones

​

How It Works

1. Beam Generation: Creates multiple beams with random properties (position, width, speed, hue)
2. Animation Loop: Uses requestAnimationFrame for smooth 60fps animations
3. Gradient Drawing: Each beam is rendered with a linear gradient for smooth edges
4. Pulsing: Sine wave functions create organic pulsing effects
5. Dark Mode Detection: Observes DOM changes to adapt colors automatically

​

Dependencies

• motion (Framer Motion) - For overlay animations
• react - Core React hooks (useEffect, useRef)
• cn utility - For className merging (from shadcn/ui)

​

Accessibility

• The canvas element is decorative and does not require ARIA labels
• Content placed inside the component should be properly structured with semantic HTML
• Ensure sufficient color contrast for text placed over the background

​

Performance Notes

• Uses devicePixelRatio for sharp rendering on high-DPI displays
• Implements proper cleanup of animation frames and event listeners
• Canvas is positioned absolutely to avoid layout reflows
• Blur effects are applied via CSS filter property for GPU acceleration

​

Browser Support

• HTML Canvas 2D Context
• CSS backdrop-filter
• requestAnimationFrame
• ES6+ JavaScript features