Component Overview BackgroundBeamsWithCollision This is the main layout wrapper component that:
Animates vertical beams falling from top to bottom.
Detects collisions between these beams and a designated collision zone near the bottom.
Triggers explosion particle effects at collision points for visual feedback.
Supports customizable beam parameters, background gradients, and explosion intensity.
Wraps around children content (like headings, buttons, or descriptions).
🌠Key Features
Position (x)
Duration
Delay
Height
Repeat delay
Styled with Tailwind CSS gradients and shadows to give a subtle "futuristic" vibe.
Upon collision, the beam triggers a visual explosion effect and resets its animation.
A central flash
A horizontal beam flash
Multiple particles shooting outward in random directions
Uses Framer Motion for all animations.
explosionIntensity: Controls how many particles appear during the explosion.
backgroundColor: Allows background theming via Tailwind classes.
🧩 Support Components Beam: Handles individual beam rendering and movement.
ExplosionParticle: Handles rendering of a single particle from an explosion.
Explosion: Renders the entire explosion effect at a given point.
🧪 Demo Component Demo Showcases the usage of BackgroundBeamsWithCollision.
Presents a polished enterprise-themed landing section with animated heading, text, and buttons.
Highlights business metrics like uptime, client count, and support availability.
Uses smooth motion transitions to reveal content elegantly.
🎯 Use Cases Landing pages for tech startups, SaaS platforms, or enterprise software products.
Visual hero sections where subtle animations enhance user engagement.
Dynamic UI storytelling with modern aesthetics.
💡 Technologies Used React for component logic and state.
Framer Motion for smooth animations and transitions.
Tailwind CSS for styling.
React Hooks (useRef, useEffect, useMemo, useCallback, useState) for performance and DOM management.
✅ Summary This component suite provides a highly interactive, animated background system ideal for premium websites or product showcases. It's designed to be both professional and minimal while offering smooth interactions and visual delight through collision-based effects.
import BackgroundBeamsWithCollision from "@/components/ui/futurastic-hero-section-1";
export default function DemoOne() {
return <BackgroundBeamsWithCollision />;
}