umwd-components 0.1.195 → 0.1.196

package/dist/cjs/components/FluidBackground.js

@@ -0,0 +1,261 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function FluidBackground() {
+  const [objectX, setObjectX] = React.useState(window.innerWidth / 2); // Initial position
+  const [objectY, setObjectY] = React.useState(window.innerHeight / 2);
+  const [brightness, setBrightness] = React.useState(1);
+  const maxBrightness = 1.5;
+  const minBrightness = 0.5;
+  const minSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
+  const maxSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
+  const [ObjectSize, setObjectSize] = React.useState(maxSize); // Initial size
+  let transitionInterval = null; // Declare transitionInterval variable
+
+  const handleMove = (x, y) => {
+    setObjectX(x);
+    setObjectY(y);
+  };
+  const handleStart = () => {
+    const duration = 3000; // duration in milliseconds
+    const steps = 180; // number of steps for the transition
+    const stepDuration = duration / steps; // duration of each step
+
+    let currentBrightness = brightness;
+    let targetBrightness = maxBrightness;
+    let currentSize = ObjectSize;
+    let targetSize = minSize;
+    let step = 0;
+
+    // Clear any existing transition interval
+    if (transitionInterval) {
+      clearInterval(transitionInterval);
+    }
+    transitionInterval = setInterval(() => {
+      step++;
+      currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
+      currentSize = currentSize - (currentSize - targetSize) / steps;
+      setBrightness(currentBrightness);
+      setObjectSize(currentSize);
+      if (step === steps) {
+        if (transitionInterval) {
+          clearInterval(transitionInterval);
+        }
+      }
+    }, stepDuration);
+  };
+  const handleEnd = () => {
+    const duration = 3000; // duration in milliseconds
+    const steps = 180; // number of steps for the transition
+    const stepDuration = duration / steps; // duration of each step
+
+    let currentBrightness = brightness;
+    let targetBrightness = minBrightness;
+    let currentSize = ObjectSize;
+    let targetSize = maxSize;
+    let step = 0;
+
+    // Clear any existing transition interval
+    if (transitionInterval) {
+      clearInterval(transitionInterval);
+    }
+    transitionInterval = setInterval(() => {
+      step++;
+      currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
+      currentSize = currentSize - (currentSize - targetSize) / steps;
+      setBrightness(currentBrightness);
+      setObjectSize(currentSize);
+      if (step === steps) {
+        if (transitionInterval) {
+          clearInterval(transitionInterval);
+        }
+      }
+    }, stepDuration);
+  };
+
+  // Add event listeners to trigger handleEnd on touch end or mouse up
+  React.useEffect(() => {
+    const handleEndEvent = () => {
+      handleEnd();
+    };
+    window.addEventListener("touchend", handleEndEvent);
+    window.addEventListener("mouseup", handleEndEvent);
+    return () => {
+      window.removeEventListener("touchend", handleEndEvent);
+      window.removeEventListener("mouseup", handleEndEvent);
+    };
+  }, []);
+
+  // Add event listeners to trigger handleStart on touch start or mouse down
+  React.useEffect(() => {
+    const handleStartEvent = () => {
+      handleStart();
+    };
+    window.addEventListener("touchstart", handleStartEvent);
+    window.addEventListener("mousedown", handleStartEvent);
+    return () => {
+      window.removeEventListener("touchstart", handleStartEvent);
+      window.removeEventListener("mousedown", handleStartEvent);
+    };
+  }, []);
+
+  // Add event listeners to trigger handleMove on touch move or mouse move
+  React.useEffect(() => {
+    const handleMoveEvent = e => {
+      const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+      const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+      handleMove(x, y);
+    };
+    window.addEventListener("touchmove", handleMoveEvent);
+    window.addEventListener("mousemove", handleMoveEvent);
+    return () => {
+      window.removeEventListener("touchmove", handleMoveEvent);
+      window.removeEventListener("mousemove", handleMoveEvent);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      height: "100vh",
+      zIndex: -1,
+      pointerEvents: "none",
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "background",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      display: "Block",
+      width: "100%",
+      height: "100%",
+      background: "#2d2d2d",
+      zIndex: -1
+    }
+  }), /*#__PURE__*/React.createElement("svg", {
+    id: "object",
+    width: "".concat(ObjectSize, "px"),
+    height: "".concat(ObjectSize, "px"),
+    style: {
+      position: "absolute",
+      top: "".concat(objectY, "px"),
+      left: "".concat(objectX, "px"),
+      transform: "translate(-50%, -50%)"
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
+    id: "radial-gradient-mask"
+  }, /*#__PURE__*/React.createElement("radialGradient", {
+    id: "gradient",
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    fx: "50%",
+    fy: "50%"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: "white"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: "black"
+  })), /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "url(#gradient)"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#439392",
+    mask: "url(#radial-gradient-mask)",
+    style: {
+      filter: "brightness(".concat(brightness, ")")
+    }
+  })), /*#__PURE__*/React.createElement("svg", {
+    id: "foreground",
+    style: {
+      position: "absolute",
+      minWidth: "100%",
+      minHeight: "100%"
+    },
+    viewBox: "0 0 7680 4320 "
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
+    id: "mask"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("text", {
+    transform: "translate(-1000 200) rotate(-15)",
+    style: {
+      fill: "#000",
+      fontFamily: "Merriweather-Bold, Merriweather",
+      fontSize: "360px",
+      fontWeight: 700,
+      letterSpacing: ".055em"
+    }
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "0"
+  }, "JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "432"
+  }, "DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "864"
+  }, "STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "1296"
+  }, "KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "1728"
+  }, "CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "2160"
+  }, "REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "2592"
+  }, "THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "3024"
+  }, "DEEP UNDERSTANDING OF THE LATEST WEB", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "3456"
+  }, "DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "3888"
+  }, "SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "4320"
+  }, "AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "4752"
+  }, "FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "5184"
+  }, "YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "5616"
+  }, "OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "), /*#__PURE__*/React.createElement("tspan", {
+    x: "0",
+    y: "6048"
+  }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#222",
+    mask: "url(#mask)"
+  })));
+}
+
+exports.default = FluidBackground;

package/dist/cjs/index.js

@@ -18,6 +18,7 @@ var BulletList = require('./components/BulletList.js');
 var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.js');
 var ScrollLink = require('./components/ScrollLink.js');
 var ScrollNavbar = require('./components/ScrollNavbar.js');
+var FluidBackground = require('./components/FluidBackground.js');
 
 
 
@@ -33,3 +34,4 @@ exports.BulletList = BulletList.default;
 exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;
 exports.ScrollLink = ScrollLink.default;
 exports.ScrollNavbar = ScrollNavbar.default;
+exports.FluidBackground = FluidBackground.default;

package/dist/esm/components/FluidBackground.js

@@ -0,0 +1,257 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default, { useState, useEffect } from 'react';
+
+function FluidBackground() {
+  const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
+  const [objectY, setObjectY] = useState(window.innerHeight / 2);
+  const [brightness, setBrightness] = useState(1);
+  const maxBrightness = 1.5;
+  const minBrightness = 0.5;
+  const minSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
+  const maxSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
+  const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
+  let transitionInterval = null; // Declare transitionInterval variable
+
+  const handleMove = (x, y) => {
+    setObjectX(x);
+    setObjectY(y);
+  };
+  const handleStart = () => {
+    const duration = 3000; // duration in milliseconds
+    const steps = 180; // number of steps for the transition
+    const stepDuration = duration / steps; // duration of each step
+
+    let currentBrightness = brightness;
+    let targetBrightness = maxBrightness;
+    let currentSize = ObjectSize;
+    let targetSize = minSize;
+    let step = 0;
+
+    // Clear any existing transition interval
+    if (transitionInterval) {
+      clearInterval(transitionInterval);
+    }
+    transitionInterval = setInterval(() => {
+      step++;
+      currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
+      currentSize = currentSize - (currentSize - targetSize) / steps;
+      setBrightness(currentBrightness);
+      setObjectSize(currentSize);
+      if (step === steps) {
+        if (transitionInterval) {
+          clearInterval(transitionInterval);
+        }
+      }
+    }, stepDuration);
+  };
+  const handleEnd = () => {
+    const duration = 3000; // duration in milliseconds
+    const steps = 180; // number of steps for the transition
+    const stepDuration = duration / steps; // duration of each step
+
+    let currentBrightness = brightness;
+    let targetBrightness = minBrightness;
+    let currentSize = ObjectSize;
+    let targetSize = maxSize;
+    let step = 0;
+
+    // Clear any existing transition interval
+    if (transitionInterval) {
+      clearInterval(transitionInterval);
+    }
+    transitionInterval = setInterval(() => {
+      step++;
+      currentBrightness = currentBrightness - (currentBrightness - targetBrightness) / steps;
+      currentSize = currentSize - (currentSize - targetSize) / steps;
+      setBrightness(currentBrightness);
+      setObjectSize(currentSize);
+      if (step === steps) {
+        if (transitionInterval) {
+          clearInterval(transitionInterval);
+        }
+      }
+    }, stepDuration);
+  };
+
+  // Add event listeners to trigger handleEnd on touch end or mouse up
+  useEffect(() => {
+    const handleEndEvent = () => {
+      handleEnd();
+    };
+    window.addEventListener("touchend", handleEndEvent);
+    window.addEventListener("mouseup", handleEndEvent);
+    return () => {
+      window.removeEventListener("touchend", handleEndEvent);
+      window.removeEventListener("mouseup", handleEndEvent);
+    };
+  }, []);
+
+  // Add event listeners to trigger handleStart on touch start or mouse down
+  useEffect(() => {
+    const handleStartEvent = () => {
+      handleStart();
+    };
+    window.addEventListener("touchstart", handleStartEvent);
+    window.addEventListener("mousedown", handleStartEvent);
+    return () => {
+      window.removeEventListener("touchstart", handleStartEvent);
+      window.removeEventListener("mousedown", handleStartEvent);
+    };
+  }, []);
+
+  // Add event listeners to trigger handleMove on touch move or mouse move
+  useEffect(() => {
+    const handleMoveEvent = e => {
+      const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+      const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+      handleMove(x, y);
+    };
+    window.addEventListener("touchmove", handleMoveEvent);
+    window.addEventListener("mousemove", handleMoveEvent);
+    return () => {
+      window.removeEventListener("touchmove", handleMoveEvent);
+      window.removeEventListener("mousemove", handleMoveEvent);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      height: "100vh",
+      zIndex: -1,
+      pointerEvents: "none",
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    id: "background",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      display: "Block",
+      width: "100%",
+      height: "100%",
+      background: "#2d2d2d",
+      zIndex: -1
+    }
+  }), /*#__PURE__*/React__default.createElement("svg", {
+    id: "object",
+    width: "".concat(ObjectSize, "px"),
+    height: "".concat(ObjectSize, "px"),
+    style: {
+      position: "absolute",
+      top: "".concat(objectY, "px"),
+      left: "".concat(objectX, "px"),
+      transform: "translate(-50%, -50%)"
+    }
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
+    id: "radial-gradient-mask"
+  }, /*#__PURE__*/React__default.createElement("radialGradient", {
+    id: "gradient",
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    fx: "50%",
+    fy: "50%"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0%",
+    stopColor: "white"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "100%",
+    stopColor: "black"
+  })), /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "url(#gradient)"
+  }))), /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#439392",
+    mask: "url(#radial-gradient-mask)",
+    style: {
+      filter: "brightness(".concat(brightness, ")")
+    }
+  })), /*#__PURE__*/React__default.createElement("svg", {
+    id: "foreground",
+    style: {
+      position: "absolute",
+      minWidth: "100%",
+      minHeight: "100%"
+    },
+    viewBox: "0 0 7680 4320 "
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("text", {
+    transform: "translate(-1000 200) rotate(-15)",
+    style: {
+      fill: "#000",
+      fontFamily: "Merriweather-Bold, Merriweather",
+      fontSize: "360px",
+      fontWeight: 700,
+      letterSpacing: ".055em"
+    }
+  }, /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "0"
+  }, "JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "432"
+  }, "DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "864"
+  }, "STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "1296"
+  }, "KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "1728"
+  }, "CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "2160"
+  }, "REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "2592"
+  }, "THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "3024"
+  }, "DEEP UNDERSTANDING OF THE LATEST WEB", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "3456"
+  }, "DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "3888"
+  }, "SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "4320"
+  }, "AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "4752"
+  }, "FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "5184"
+  }, "YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "5616"
+  }, "OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "), /*#__PURE__*/React__default.createElement("tspan", {
+    x: "0",
+    y: "6048"
+  }, "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.")))), /*#__PURE__*/React__default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#222",
+    mask: "url(#mask)"
+  })));
+}
+
+export { FluidBackground as default };

package/dist/esm/index.js

@@ -16,3 +16,4 @@ export { default as BulletList } from './components/BulletList.js';
 export { default as WhatsAppClickToChatButton } from './components/WhatsAppClickToChatButton.js';
 export { default as ScrollLink } from './components/ScrollLink.js';
 export { default as ScrollNavbar } from './components/ScrollNavbar.js';
+export { default as FluidBackground } from './components/FluidBackground.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.195",
+  "version": "0.1.196",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/FluidBackground.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from "react";
+
+function FluidBackground() {
+  const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
+  const [objectY, setObjectY] = useState(window.innerHeight / 2);
+  const [brightness, setBrightness] = useState(1);
+  const maxBrightness = 1.5;
+  const minBrightness = 0.5;
+  const minSize =
+    Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
+  const maxSize =
+    Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
+  const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
+  let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
+
+  const handleMove = (x: number, y: number) => {
+    setObjectX(x);
+    setObjectY(y);
+  };
+
+  const handleStart = () => {
+    const duration = 3000; // duration in milliseconds
+    const steps = 180; // number of steps for the transition
+    const stepDuration = duration / steps; // duration of each step
+
+    let currentBrightness = brightness;
+    let targetBrightness = maxBrightness;
+    let currentSize = ObjectSize;
+    let targetSize = minSize;
+    let step = 0;
+
+    // Clear any existing transition interval
+    if (transitionInterval) {
+      clearInterval(transitionInterval);
+    }
+
+    transitionInterval = setInterval(() => {
+      step++;
+      currentBrightness =
+        currentBrightness - (currentBrightness - targetBrightness) / steps;
+      currentSize = currentSize - (currentSize - targetSize) / steps;
+      setBrightness(currentBrightness);
+      setObjectSize(currentSize);
+
+      if (step === steps) {
+        if (transitionInterval) {
+          clearInterval(transitionInterval);
+        }
+      }
+    }, stepDuration);
+  };
+
+  const handleEnd = () => {
+    const duration = 3000; // duration in milliseconds
+    const steps = 180; // number of steps for the transition
+    const stepDuration = duration / steps; // duration of each step
+
+    let currentBrightness = brightness;
+    let targetBrightness = minBrightness;
+    let currentSize = ObjectSize;
+    let targetSize = maxSize;
+    let step = 0;
+
+    // Clear any existing transition interval
+    if (transitionInterval) {
+      clearInterval(transitionInterval);
+    }
+
+    transitionInterval = setInterval(() => {
+      step++;
+      currentBrightness =
+        currentBrightness - (currentBrightness - targetBrightness) / steps;
+      currentSize = currentSize - (currentSize - targetSize) / steps;
+      setBrightness(currentBrightness);
+      setObjectSize(currentSize);
+
+      if (step === steps) {
+        if (transitionInterval) {
+          clearInterval(transitionInterval);
+        }
+      }
+    }, stepDuration);
+  };
+
+  // Add event listeners to trigger handleEnd on touch end or mouse up
+  useEffect(() => {
+    const handleEndEvent = () => {
+      handleEnd();
+    };
+
+    window.addEventListener("touchend", handleEndEvent);
+    window.addEventListener("mouseup", handleEndEvent);
+
+    return () => {
+      window.removeEventListener("touchend", handleEndEvent);
+      window.removeEventListener("mouseup", handleEndEvent);
+    };
+  }, []);
+
+  // Add event listeners to trigger handleStart on touch start or mouse down
+  useEffect(() => {
+    const handleStartEvent = () => {
+      handleStart();
+    };
+
+    window.addEventListener("touchstart", handleStartEvent);
+    window.addEventListener("mousedown", handleStartEvent);
+
+    return () => {
+      window.removeEventListener("touchstart", handleStartEvent);
+      window.removeEventListener("mousedown", handleStartEvent);
+    };
+  }, []);
+
+  // Add event listeners to trigger handleMove on touch move or mouse move
+  useEffect(() => {
+    const handleMoveEvent = (e: TouchEvent | MouseEvent) => {
+      const x = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+      const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+      handleMove(x, y);
+    };
+
+    window.addEventListener("touchmove", handleMoveEvent);
+    window.addEventListener("mousemove", handleMoveEvent);
+
+    return () => {
+      window.removeEventListener("touchmove", handleMoveEvent);
+      window.removeEventListener("mousemove", handleMoveEvent);
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        zIndex: -1,
+        pointerEvents: "none",
+        isolation: "isolate",
+      }}
+    >
+      <div
+        id="background"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "Block",
+          width: "100%",
+          height: "100%",
+          background: "#2d2d2d",
+          zIndex: -1,
+        }}
+      />
+      <svg
+        id="object"
+        width={`${ObjectSize}px`}
+        height={`${ObjectSize}px`}
+        style={{
+          position: "absolute",
+          top: `${objectY}px`,
+          left: `${objectX}px`,
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        <defs>
+          <mask id="radial-gradient-mask">
+            <radialGradient
+              id="gradient"
+              cx="50%"
+              cy="50%"
+              r="50%"
+              fx="50%"
+              fy="50%"
+            >
+              <stop offset="0%" stopColor="white" />
+              <stop offset="100%" stopColor="black" />
+            </radialGradient>
+            <rect width="100%" height="100%" fill="url(#gradient)" />
+          </mask>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill="#439392"
+          mask="url(#radial-gradient-mask)"
+          style={{ filter: `brightness(${brightness})` }}
+        />
+      </svg>
+
+      <svg
+        id="foreground"
+        style={{ position: "absolute", minWidth: "100%", minHeight: "100%" }}
+        viewBox="0 0 7680 4320 "
+      >
+        <defs>
+          <mask id="mask">
+            <rect width={"100%"} height={"100%"} fill="white" />
+            <text
+              transform="translate(-1000 200) rotate(-15)"
+              style={{
+                fill: "#000",
+                fontFamily: "Merriweather-Bold, Merriweather",
+                fontSize: "360px",
+                fontWeight: 700,
+                letterSpacing: ".055em",
+              }}
+            >
+              <tspan x="0" y="0">
+                JELLE PAULUS IS A TALENTED WEB DEVELOPER AND{" "}
+              </tspan>
+              <tspan x="0" y="432">
+                DESIGNER WITH A PASSION FOR CREATING VISUALLY{" "}
+              </tspan>
+              <tspan x="0" y="864">
+                STUNNING AND USER-FRIENDLY WEBSITES. WITH A{" "}
+              </tspan>
+              <tspan x="0" y="1296">
+                KEEN EYE FOR DETAIL AND A FOCUS ON CREATING{" "}
+              </tspan>
+              <tspan x="0" y="1728">
+                CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A{" "}
+              </tspan>
+              <tspan x="0" y="2160">
+                REPUTATION FOR DELIVERING HIGH-QUALITY WORK{" "}
+              </tspan>
+              <tspan x="0" y="2592">
+                THAT EXCEEDS HIS CLIENTS&apos; EXPECTATIONS. HE HAS A{" "}
+              </tspan>
+              <tspan x="0" y="3024">
+                DEEP UNDERSTANDING OF THE LATEST WEB{" "}
+              </tspan>
+              <tspan x="0" y="3456">
+                DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO{" "}
+              </tspan>
+              <tspan x="0" y="3888">
+                SEAMLESSLY INTEGRATE FUNCTIONALITY AND{" "}
+              </tspan>
+              <tspan x="0" y="4320">
+                AESTHETICS TO CREATE WEBSITES THAT ARE BOTH{" "}
+              </tspan>
+              <tspan x="0" y="4752">
+                FUNCTIONAL AND VISUALLY APPEALING. WHETHER{" "}
+              </tspan>
+              <tspan x="0" y="5184">
+                YOU&apos;RE LOOKING TO ESTABLISH AN ONLINE PRESENCE{" "}
+              </tspan>
+              <tspan x="0" y="5616">
+                OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE{" "}
+              </tspan>
+              <tspan x="0" y="6048">
+                SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.
+              </tspan>
+            </text>
+          </mask>
+        </defs>
+        <rect
+          width={"100%"}
+          height={"100%"}
+          fill="#222"
+          mask="url(#mask)"
+        ></rect>
+      </svg>
+    </div>
+  );
+}
+
+export default FluidBackground;

package/src/index.js

@@ -10,3 +10,4 @@ export { default as BulletList } from "./components/BulletList";
 export { default as WhatsAppClickToChatButton } from "./components/WhatsAppClickToChatButton.tsx";
 export { default as ScrollLink } from "./components/ScrollLink.tsx";
 export { default as ScrollNavbar } from "./components/ScrollNavbar.tsx";
+export { default as FluidBackground } from "./components/FluidBackground.tsx";

package/src/stories/FluidBackground.stories.js

@@ -0,0 +1,29 @@
+import FluidBackground from "../components/FluidBackground.tsx";
+import React from "react";
+
+export default {
+  title: "UMWD/FluidBackground",
+  component: FluidBackground,
+};
+
+const Template = ({ ...args }) => {
+  return (
+    <>
+      <FluidBackground {...args} />
+    </>
+  );
+};
+
+/* export const Orefs = Template.bind({});
+    
+    Orefs.args = {};
+    
+    export const UMWD = Template.bind({});
+    
+    UMWD.args = {}; */
+
+export const AMH = Template.bind({});
+
+AMH.args = {
+  data: {},
+};