Ignite Your Interface with Background Beams: Dynamic Motion & Spark Effects in BuouUI
Ignite Your Interface with Background Beams: Dynamic Motion & Spark Effects in BuouUI
If you're looking to add a visually stunning, immersive, and highly interactive background to your UI — meet Background Beams, one of the most eye-catching animation components in BuouUI.
This component is designed to bring your hero sections, sign-in pages, or entire layouts to life through a combination of animated gradient backgrounds, flickering light beams, and collision-based spark effects.
🔥 What is Background Beams?
Background Beams is more than just a background — it’s an ambient visual layer that gives your interface a sense of depth, motion, and energy. It’s ideal for:
- Splash pages
- Login/Sign-up interfaces
- Hero sections for SaaS or creative tools
- Landing pages where you want to impress at first glance
It blends performance-optimized visuals with customizable beam effects, giving your app that signature “designed with intent” look.
🌈 Features Overview
| Feature | Description |
|---|---|
| 🎨 Designer Background | Subtle yet powerful animated gradient background layer |
| 💡 Dynamic Light Beams | Moving, fading beams that feel like light trails or energy waves |
| ✨ Collision Sparks | Beautiful spark animations triggered by simulated beam interaction |
| 🧩 Easy Integration | Works as a full-screen wrapper or background for any section |
| ⚙️ Customizable Parameters | Adjust beam color, density, speed, and spark frequency |
👀 Live Demo
Want to see it in action?
👉 Background Beams
Watch as the beams dance, sparks flicker, and the background gently pulses behind your content. You can tweak the parameters live in the demo to see how it fits your brand or layout.
🛠 How to Use
Integrating Background Beams is as simple as wrapping your content:
export default function Home() {
return (
<main>
<BeamsBackground
beams={[
{
initialX: -400,
translateX: 600,
duration: 7,
repeatDelay: 3,
color: "from-blue-500 via-indigo-500",
},
{
initialX: 200,
translateX: 1200,
duration: 5,
repeatDelay: 3,
color: "from-green-500 via-emerald-500",
},
]}
/>
</main>
)
}