BushDevelops.github.io/gradient-bg.js at main · BushDevelops/BushDevelops.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/**
 * Animated, mouse-reactive gradient background.
 * Drop <script src="gradient-bg.js"></script> anywhere in the page —
 * it self-injects its own styles and markup, sits behind all content,
 * and never intercepts clicks/scroll (pointer-events: none throughout).
 */
(function () {
  var prefersReducedMotion =
    window.matchMedia &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  var style = document.createElement("style");
  style.textContent = [
    ".gradient-bg-root {",
    "  position: fixed;",
    "  inset: 0;",
    "  z-index: -1;",
    "  overflow: hidden;",
    "  pointer-events: none;",
    "  background: #151515;",
    "}",
    ".gradient-bg-root .blob {",
    "  position: absolute;",
    "  border-radius: 50%;",
    "  filter: blur(90px);",
    "  opacity: 0.38;",
    "  mix-blend-mode: screen;",
    "  will-change: transform;",
    "}",
    ".gradient-bg-root .blob-1 {",
    "  width: 46vw;",
    "  height: 46vw;",
    "  left: -10vw;",
    "  top: -10vw;",
    "  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);",
    "  animation: drift1 26s ease-in-out infinite;",
    "}",
    ".gradient-bg-root .blob-2 {",
    "  width: 38vw;",
    "  height: 38vw;",
    "  right: -8vw;",
    "  bottom: -8vw;",
    "  background: radial-gradient(circle, #0ea5e9 0%, transparent 70%);",
    "  animation: drift2 32s ease-in-out infinite;",
    "}",
    ".gradient-bg-root .blob-3 {",
    "  width: 30vw;",
    "  height: 30vw;",
    "  left: 50%;",
    "  top: 50%;",
    "  margin-left: -15vw;",
    "  margin-top: -15vw;",
    "  background: radial-gradient(circle, #db2777 0%, transparent 70%);",
    "  opacity: 0.32;",
    "}",
    "@keyframes drift1 {",
    "  0%, 100% { transform: translate(0, 0) scale(1); }",
    "  50% { transform: translate(6vw, 8vw) scale(1.1); }",
    "}",
    "@keyframes drift2 {",
    "  0%, 100% { transform: translate(0, 0) scale(1); }",
    "  50% { transform: translate(-7vw, -5vw) scale(1.08); }",
    "}",
  ].join("\n");
  document.head.appendChild(style);

  var root = document.createElement("div");
  root.className = "gradient-bg-root";
  root.setAttribute("aria-hidden", "true");
  root.innerHTML =
    '<div class="blob blob-1"></div>' +
    '<div class="blob blob-2"></div>' +
    '<div class="blob blob-3" id="gradient-bg-cursor-blob"></div>';
  document.body.insertBefore(root, document.body.firstChild);

  if (prefersReducedMotion) {
    // Keep the static gradient but skip mouse-tracking/animation for
    // people who've asked their OS to reduce motion.
    return;
  }

  var cursorBlob = document.getElementById("gradient-bg-cursor-blob");
  var targetX = window.innerWidth / 2;
  var targetY = window.innerHeight / 2;
  var currentX = targetX;
  var currentY = targetY;

  function setTarget(x, y) {
    targetX = x;
    targetY = y;
  }

  window.addEventListener(
    "mousemove",
    function (e) {
      setTarget(e.clientX, e.clientY);
    },
    { passive: true },
  );

  window.addEventListener(
    "touchmove",
    function (e) {
      if (e.touches && e.touches[0]) {
        setTarget(e.touches[0].clientX, e.touches[0].clientY);
      }
    },
    { passive: true },
  );

  function tick() {
    // Ease toward the target so the blob glides instead of snapping.
    currentX += (targetX - currentX) * 0.06;
    currentY += (targetY - currentY) * 0.06;
    cursorBlob.style.transform =
      "translate3d(" +
      (currentX - window.innerWidth * 0.15) +
      "px," +
      (currentY - window.innerHeight * 0.15) +
      "px,0)";
    cursorBlob.style.left = "0";
    cursorBlob.style.top = "0";
    cursorBlob.style.marginLeft = "0";
    cursorBlob.style.marginTop = "0";
    requestAnimationFrame(tick);
  }

  requestAnimationFrame(tick);
})();