Aurora Backdrop

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { useInViewport } from "@/registry/lib/use-in-viewport"
7 
8export interface AuroraBackdropProps extends React.ComponentProps<"div"> {
9  /** Colours of the drifting blobs. One blob is drawn per colour. */
10  colors?: string[]
11  /** Blur applied to the whole wash, as a CSS length. */
12  blur?: string
13  /** Seconds for one full drift of a single blob. */
14  duration?: number
15  /** Opacity of the layer, from `0` to `1`. */
16  intensity?: number
17  /** Changes where the blobs sit. Same seed, same layout, every render. */
18  seed?: number
19  /** Render the wash static. */
20  disabled?: boolean
21}
22 
23const DEFAULT_COLORS = ["#2dd4bf", "#38bdf8", "#3b82f6", "#a78bfa"]
24 
25/** Mulberry32. Deterministic so the server and the client agree. */
26function createRandom(seed: number) {
27  let state = seed >>> 0
28  return () => {
29    state = (state + 0x6d2b79f5) >>> 0
30    let t = state
31    t = Math.imul(t ^ (t >>> 15), t | 1)
32    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
33    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
34  }
35}
36 
37export function AuroraBackdrop({
38  colors = DEFAULT_COLORS,
39  blur = "72px",
40  duration = 18,
41  intensity = 0.5,
42  seed = 1,
43  disabled = false,
44  className,
45  style,
46  ...props
47}: AuroraBackdropProps) {
48  const blobs = React.useMemo(() => {
49    const palette = colors.length > 0 ? colors : DEFAULT_COLORS
50    const random = createRandom(seed)
51 
52    return palette.map((color, index) => ({
53      key: index,
54      color,
55      // Well under the container, so the drift is a blob crossing the frame
56      // rather than a full-bleed wash shifting a few percent.
57      size: 38 + random() * 32,
58      x: random() * 100,
59      y: random() * 100,
60      // Every blob runs the same keyframes at a different length and phase.
61      // Cycles that never line up are what stops the wash reading as a loop.
62      duration: duration * (0.75 + random() * 0.6),
63      delay: -random() * duration,
64    }))
65  }, [colors, seed, duration])
66 
67  const root = React.useRef<HTMLDivElement>(null)
68  // Large blurred gradients are the most expensive thing here to keep drifting
69  // for a viewport nobody is looking at.
70  const onScreen = useInViewport(root)
71 
72  return (
73    <div
74      ref={root}
75      data-slot="aurora-backdrop"
76      aria-hidden="true"
77      className={cn(
78        "pointer-events-none absolute inset-0 overflow-hidden",
79        className
80      )}
81      style={{ opacity: intensity, ...style }}
82      {...props}
83// … truncated