Background Lines

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5// @interlace/background-lines v1.1.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/background-lines
7// What changed since: https://ds.interlace.tools/c/background-lines#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — BackgroundLines
12 *
13 * A full-bleed backdrop of twelve long, sweeping SVG curves that draw
14 * themselves in and fade out on a loop, each staggered by a fixed delay so the
15 * field never pulses in unison.
16 *
17 * Your children render above it on a `z-10` layer; the container is
18 * `h-[20rem] md:h-screen`.
19 *
20 * Our reimplementation of the Aceternity UI effect of the same name. What is
21 * ours: the path count is cut to twelve, the per-path delays are a fixed
22 * lookup table rather than `Math.random()` (so server and client agree and the
23 * field is reproducible), and both the wrapper and the SVG are `memo`'d behind
24 * an `IntersectionObserver` that unmounts the whole layer off-screen.
25 *
26 * ## Anatomy
27 *
28 *   BackgroundLines                  (div — bg-white dark:bg-black, isolate,
29 *                                     contain: layout style paint)
30 *     ├─ div.absolute.inset-0
31 *     │   └─ SVG                     (motion.svg, viewBox 0 0 1440 900,
32 *     │       └─ motion.path ×12      opacity 0.4, aria-hidden,
33 *     │                               pointer-events-none)
34 *     └─ div.z-10                    (your children)
35 *
36 * Each path animates `strokeDashoffset 800 → 0` with the dash pattern
37 * tightening from `"50 800"` to `"20 800"` and opacity running `[0, 1, 1, 0]`,
38 * so the stroke reads as a comet drawing along the curve.
39 *
40 * ## Motion
41 *
42 * JS-driven — `motion/react` variants on twelve paths, `repeat: Infinity`. The
43 * CSS reset in `styles/preflight.css` cannot reach motion's inline styles, so
44 * the gate is in JS and it is total: the layer renders only under
45 * `{isVisible && !reduceMotion && <SVG …/>}`, so under
46 * `prefers-reduced-motion: reduce` no SVG mounts at all and the surface is a
47 * plain white (or black) box behind your content.
48 *
49 * ## What it does not give you
50 *
51 * - The twelve stroke colours are a hard-coded hex array in this file and are
52 *   not props. Neither are the paths. `svgOptions.duration` (default 10s) is
53 *   the only knob.
54 * - The surface is `bg-white dark:bg-black`, not a background token.
55// … truncated