# 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.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: motion
- Live preview: https://21st.dev/@uniquesonu/components/futurastic-hero-section-1

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/futurastic-hero-section-1?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt