Bubble Background

1'use client';
2 
3import * as React from 'react';
4import {
5  motion,
6  useMotionValue,
7  useSpring,
8  type SpringOptions,
9} from 'motion/react';
10 
11import { cn } from '@/lib/utils';
12 
13type BubbleColors = {
14  first: string;
15  second: string;
16  third: string;
17  fourth: string;
18  fifth: string;
19  sixth: string;
20};
21 
22type BubbleBackgroundProps = React.ComponentProps<'div'> & {
23  interactive?: boolean;
24  transition?: SpringOptions;
25  colors?: BubbleColors;
26};
27 
28function BubbleBackground({
29  ref,
30  className,
31  children,
32  interactive = false,
33  transition = { stiffness: 100, damping: 20 },
34  colors = {
35    first: '18,113,255',
36    second: '221,74,255',
37    third: '0,220,255',
38    fourth: '200,50,50',
39    fifth: '180,180,50',
40    sixth: '140,100,255',
41  },
42  ...props
43}: BubbleBackgroundProps) {
44  const containerRef = React.useRef<HTMLDivElement>(null);
45  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
46 
47  const mouseX = useMotionValue(0);
48  const mouseY = useMotionValue(0);
49  const springX = useSpring(mouseX, transition);
50  const springY = useSpring(mouseY, transition);
51 
52  const rectRef = React.useRef<DOMRect | null>(null);
53  const rafIdRef = React.useRef<number | null>(null);
54 
55  React.useLayoutEffect(() => {
56    const updateRect = () => {
57      if (containerRef.current) {
58        rectRef.current = containerRef.current.getBoundingClientRect();
59      }
60    };
61 
62    updateRect();
63 
64    const el = containerRef.current;
65    const ro = new ResizeObserver(updateRect);
66    if (el) ro.observe(el);
67 
68    window.addEventListener('resize', updateRect);
69    window.addEventListener('scroll', updateRect, { passive: true });
70 
71    return () => {
72      ro.disconnect();
73      window.removeEventListener('resize', updateRect);
74      window.removeEventListener('scroll', updateRect);
75    };
76  }, []);
77 
78  React.useEffect(() => {
79    if (!interactive) return;
80 
81    const el = containerRef.current;
82    if (!el) return;
83 
84    const handleMouseMove = (e: MouseEvent) => {
85      const rect = rectRef.current;
86      if (!rect) return;
87      const centerX = rect.left + rect.width / 2;
88      const centerY = rect.top + rect.height / 2;
89 
90      if (rafIdRef.current != null) cancelAnimationFrame(rafIdRef.current);
91      rafIdRef.current = requestAnimationFrame(() => {
92        mouseX.set(e.clientX - centerX);
93        mouseY.set(e.clientY - centerY);
94      });
95    };
96 
97    el.addEventListener('mousemove', handleMouseMove as EventListener, {
98      passive: true,
99    });
100// … truncated