Futurastic Hero Section

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 1. Animated Beams Multiple vertical beams fall infinitely with configurable: Position (x) Duration Delay Height Repeat delay Styled with Tailwind CSS gradients and shadows to give a subtle "futuristic" vibe. 2. Collision Detection Each beam checks for collision against a reference zone (collisionZoneRef) using DOM bounding boxes. Upon collision, the beam triggers a visual explosion effect and resets its animation. 3. Explosion Effects The explosion includes: A central flash A horizontal beam flash Multiple particles shooting outward in random directions Uses Framer Motion for all animations. 4. Fully Customizable beams: Allows users to supply custom beam configurations. 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.

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

import BackgroundBeamsWithCollision from "@/components/ui/futurastic-hero-section-1";

export default function DemoOne() {
  return <BackgroundBeamsWithCollision />;
}