Bubble Background

1"use client";
2 
3import React, { useEffect, useRef } from "react";
4import type { CSSProperties } from "react";
5 
6interface BubblesProps {
7  bgColorA?: string;
8  bgColorB?: string;
9  bubbleColors?: {
10    colorA?: string;
11    colorB?: string;
12    colorC?: string;
13    colorD?: string;
14    colorE?: string;
15    interactive?: string;
16  };
17  blendMode?: CSSProperties["mixBlendMode"];
18  bubbleSize?: string;
19}
20 
21const defaultBubbleColors = {
22  colorA: "18, 113, 255",
23  colorB: "221, 74, 255",
24  colorC: "100, 220, 255",
25  colorD: "200, 50, 50",
26  colorE: "180, 180, 50",
27  interactive: "148, 100, 255",
28};
29 
30export function BubbleBackground({
31  bgColorA = "rgb(108, 0, 162)",
32  bgColorB = "rgb(0, 17, 82)",
33  bubbleColors = defaultBubbleColors,
34  blendMode = "hard-light",
35  bubbleSize = "80%",
36}: BubblesProps) {
37  const interactiveRef = useRef<HTMLDivElement>(null);
38 
39  useEffect(() => {
40    let curX = 0;
41    let curY = 0;
42    let tgX = 0;
43    let tgY = 0;
44    const easeFactor = 10;
45    let animationFrameId: number;
46 
47    function move() {
48      if (!interactiveRef.current) return;
49 
50      curX += (tgX - curX) / easeFactor;
51      curY += (tgY - curY) / easeFactor;
52 
53      interactiveRef.current.style.transform = `translate(${curX}px, ${curY}px)`;
54      animationFrameId = requestAnimationFrame(move);
55    }
56 
57    const handlePointerMove = (e: PointerEvent) => {
58      tgX = e.clientX;
59      tgY = e.clientY;
60    };
61 
62    window.addEventListener("pointermove", handlePointerMove);
63    animationFrameId = requestAnimationFrame(move);
64 
65    return () => {
66      window.removeEventListener("pointermove", handlePointerMove);
67      cancelAnimationFrame(animationFrameId);
68    };
69  }, []);
70 
71  // Calculate common positions
72  const centerTop = `calc(50% - ${bubbleSize} / 2)`;
73  const centerLeft = `calc(50% - ${bubbleSize} / 2)`;
74 
75  return (
76    <div
77      className="w-screen h-screen relative overflow-hidden"
78      style={{
79        background: `linear-gradient(40deg, ${bgColorA}, ${bgColorB})`,
80      }}
81    >
82      <svg className="absolute w-0 h-0">
83        <filter id="goo">
84          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
85          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
86          <feColorMatrix
87            in="blur"
88            mode="matrix"
89            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
90            result="goo"
91          />
92          <feBlend in="SourceGraphic" in2="goo" />
93        </filter>
94      </svg>
95 
96      <div
97// … truncated