Background Beams With Collision

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5// @interlace/background-beams-with-collision v1.2.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/background-beams-with-collision
7// What changed since: https://ds.interlace.tools/c/background-beams-with-collision#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — BackgroundBeamsWithCollision
12 *
13 * A hero surface where thin vertical beams fall from the top and burst into a
14 * ten-particle explosion when they reach the strip along the bottom. Your
15 * children render above them on a `z-10` layer.
16 *
17 * The container is `h-96 md:h-[40rem]` unless `containerClassName` says
18 * otherwise.
19 *
20 * Our reimplementation of the Aceternity UI effect of the same name. What is
21 * ours: the beams are painted from `--primary` / `--chart-2` rather than the
22 * upstream purple/indigo literals, so they re-resolve per theme; an
23 * `IntersectionObserver` unmounts the whole beam layer when the hero scrolls
24 * out of view; the collision poll runs at 200ms instead of 50ms; and the
25 * explosion is ten particles instead of twenty.
26 *
27 * ## Anatomy
28 *
29 *   div                              (parent — gradient, overflow-hidden,
30 *                                     contain: layout style paint)
31 *     ├─ CollisionMechanism ×beams   (motion.div beam + AnimatePresence)
32 *     │   └─ Explosion               (glow line + 10 motion.span particles)
33 *     ├─ div.z-10                    (your children)
34 *     └─ div                         (collision surface, bottom strip —
35 *                                     styling suppressed by hideCollisionSurface)
36 *
37 * Each beam is a `BeamConfig` (`initialX`, `translateY`, `duration`, `delay`,
38 * `repeatDelay`, `className`); `beams` replaces the seven-beam default wholesale.
39 *
40 * ## Motion
41 *
42 * JS-driven throughout — `motion/react` transforms for the fall, a
43 * `setInterval` collision poll, and `AnimatePresence` for the burst. None of
44 * it is reachable by the CSS reset in `styles/preflight.css`, so the gate is
45 * in JS and it is total: `{isVisible && !reduceMotion && beams.map(…)}` means
46 * that under `prefers-reduced-motion: reduce` no `CollisionMechanism` mounts
47 * at all — no beams, no interval, no explosions. What remains is the gradient
48 * background, the collision strip, and your content. That is the intended
49 * still state, not a degraded one.
50 *
51// … truncated