From f4dcf8e518fbc73f7dd33b11b5bf89394dc7dd9c Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Thu, 5 Oct 2023 07:05:29 +0530
Subject: [PATCH] feat: dynamic-gradient util

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
---
 src/util/dynamic-gradient.css | 47 +++++++++++++++++++++++++++++++++++++++++++
 src/util/index.ts             | 14 +++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/util/dynamic-gradient.css

diff --git a/src/util/dynamic-gradient.css b/src/util/dynamic-gradient.css
new file mode 100644
index 0000000..f38a6d8
--- /dev/null
+++ b/src/util/dynamic-gradient.css
@@ -0,0 +1,47 @@
+.dynamic-gradient {
+	position: absolute;
+	font-size: 1.2rem;
+	border: none;
+	color: white;
+	cursor: pointer;
+	outline: none;
+	width: 100%;
+	height: 100%;
+	inset: 0;
+	overflow: hidden;
+	border-radius: inherit;
+	z-index: -10 !important;
+}
+
+.dynamic-gradient::before {
+	--size: 500%;
+	content: "";
+	position: absolute;
+	left: var(--x);
+	top: 50%;
+	z-index: -1;
+	width: var(--size);
+	height: var(--size);
+	transform-origin: --size, --size;
+	scale: 0;
+	opacity: 0;
+	background: radial-gradient(
+		circle closest-side,
+		rgba(0, 0, 0, 0),
+		transparent
+	);
+	transform: translate(-50%, -50%);
+	background: radial-gradient(
+		circle closest-side,
+		var(--card-active) 0%,
+		transparent 100%
+	);
+	transition: opacity 300ms ease;
+}
+
+/* @media (hover: hover) { */
+button:hover .dynamic-gradient::before {
+	scale: 1;
+	opacity: 1;
+}
+/* } */
diff --git a/src/util/index.ts b/src/util/index.ts
index 21cab9b..bdd38f6 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -55,3 +55,17 @@ export const get = {
 		return xs.at((i - 1) % xs.length)!;
 	},
 };
+
+import "./dynamic-gradient.css";
+
+export function setupDynamicGradient(el: HTMLElement | null) {
+	if (!el) return;
+
+	el.addEventListener("mousemove", e => {
+		const rect = el.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+		el.style.setProperty("--x", x + "px");
+		el.style.setProperty("--y", y + "px");
+	});
+}