From 4e18269204dd9f7adb962c1a2ea0327caba68531 Mon Sep 17 00:00:00 2001
From: not-nullptr <62841684+not-nullptr@users.noreply.github.com>
Date: Wed, 16 Apr 2025 16:10:33 +0100
Subject: [PATCH] feat: better bg gradient transition

---
 src/app.scss                               | 158 ++++++++++++++-------
 src/lib/components/layout/Gradients.svelte |  96 +++++++++++--
 2 files changed, 196 insertions(+), 58 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index b005752..fd5caab 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -44,6 +44,11 @@
 	--accent-green-alt: hsl(140, 66%, 55%);
 	--accent: var(--accent-pink);
 	--accent-alt: var(--accent-pink-alt);
+	--accent-pink-transparent: hsla(303, 100%, 50%, 0);
+	--accent-red-transparent: hsla(348, 100%, 50%, 0);
+	--accent-purple-transparent: hsla(264, 100%, 50%, 0);
+	--accent-blue-transparent: hsla(220, 100%, 50%, 0);
+	--accent-green-transparent: hsla(140, 70%, 30%, 0);
 
 	// foregrounds
 	--fg: hsl(0, 0%, 0%);
@@ -56,65 +61,91 @@
 
 	// backgrounds
 	--bg: hsl(0, 0%, 95%);
+
+	--bg-gradient-from: var(--accent-pink);
+	--bg-gradient-to: hsla(303, 100%, 50%, 0);
+	--bg-gradient-pink-from: var(--accent-pink);
+	--bg-gradient-pink-to: hsla(303, 100%, 50%, 0);
+	--bg-gradient-pink-alt-from: var(--accent-pink);
+	--bg-gradient-pink-alt-to: hsl(303, 100%, 91%);
+	--bg-gradient-red-from: var(--accent-red);
+	--bg-gradient-red-to: hsla(348, 100%, 50%, 0);
+	--bg-gradient-red-alt-from: var(--accent-red);
+	--bg-gradient-red-alt-to: hsl(348, 100%, 91%);
+	--bg-gradient-purple-from: var(--accent-purple);
+	--bg-gradient-purple-to: hsla(264, 100%, 50%, 0);
+	--bg-gradient-purple-alt-from: var(--accent-purple);
+	--bg-gradient-purple-alt-to: hsl(264, 100%, 91%);
+	--bg-gradient-blue-from: var(--accent-blue);
+	--bg-gradient-blue-to: hsla(220, 100%, 50%, 0);
+	--bg-gradient-blue-alt-from: var(--accent-blue);
+	--bg-gradient-blue-alt-to: hsl(220, 100%, 91%);
+	--bg-gradient-green-from: var(--accent-green);
+	--bg-gradient-green-to: hsla(140, 70%, 30%, 0);
+	--bg-gradient-green-alt-from: var(--accent-green-alt);
+	--bg-gradient-green-alt-to: hsl(140, 70%, 91%);
+	--bg-gradient-image-from: hsla(0, 0%, 95%, 0.5);
+	--bg-gradient-image-to: hsla(0, 0%, 95%, 1);
+
 	--bg-gradient: linear-gradient(
 		to bottom,
-		var(--accent-pink),
-		hsla(303, 100%, 50%, 0) 100%
+		var(--bg-gradient-from),
+		var(--bg-gradient-to) 100%
 	);
 	--bg-gradient-pink: linear-gradient(
 		to bottom,
-		var(--accent-pink),
-		hsla(303, 100%, 50%, 0) 25%
+		var(--bg-gradient-pink-from),
+		var(--bg-gradient-pink-to) 25%
 	);
 	--bg-gradient-pink-alt: linear-gradient(
 		to top,
-		var(--accent-pink),
-		hsl(303, 100%, 91%) 100%
+		var(--bg-gradient-pink-alt-from),
+		var(--bg-gradient-pink-alt-to) 100%
 	);
 	--bg-gradient-red: linear-gradient(
 		to bottom,
-		var(--accent-red),
-		hsla(348, 100%, 50%, 0) 25%
+		var(--bg-gradient-red-from),
+		var(--bg-gradient-red-to) 25%
 	);
 	--bg-gradient-red-alt: linear-gradient(
 		to top,
-		var(--accent-red),
-		hsl(348, 100%, 91%) 100%
+		var(--bg-gradient-red-alt-from),
+		var(--bg-gradient-red-alt-to) 100%
 	);
 	--bg-gradient-purple: linear-gradient(
 		to bottom,
-		var(--accent-purple),
-		hsla(264, 100%, 50%, 0) 25%
+		var(--bg-gradient-purple-from),
+		var(--bg-gradient-purple-to) 25%
 	);
 	--bg-gradient-purple-alt: linear-gradient(
 		to top,
-		var(--accent-purple),
-		hsl(264, 100%, 91%) 100%
+		var(--bg-gradient-purple-alt-from),
+		var(--bg-gradient-purple-alt-to) 100%
 	);
 	--bg-gradient-blue: linear-gradient(
 		to bottom,
-		var(--accent-blue),
-		hsla(220, 100%, 50%, 0) 25%
+		var(--bg-gradient-blue-from),
+		var(--bg-gradient-blue-to) 25%
 	);
 	--bg-gradient-blue-alt: linear-gradient(
 		to top,
-		var(--accent-blue),
-		hsl(220, 100%, 91%) 100%
+		var(--bg-gradient-blue-alt-from),
+		var(--bg-gradient-blue-alt-to) 100%
 	);
 	--bg-gradient-green: linear-gradient(
 		to bottom,
-		var(--accent-green),
-		hsla(140, 70%, 30%, 0) 25%
+		var(--bg-gradient-green-from),
+		var(--bg-gradient-green-to) 25%
 	);
 	--bg-gradient-green-alt: linear-gradient(
 		to top,
-		var(--accent-green-alt),
-		hsl(140, 70%, 91%) 100%
+		var(--bg-gradient-green-alt-from),
+		var(--bg-gradient-green-alt-to) 100%
 	);
 	--bg-gradient-image: linear-gradient(
 		to bottom,
-		hsla(0, 0%, 95%, 0.5),
-		hsla(0, 0%, 95%, 1) 100%
+		var(--bg-gradient-image-from),
+		var(--bg-gradient-image-to) 100%
 	);
 	--bg-panel: hsl(0, 0%, 100%);
 	--bg-panel-highlight: hsl(0, 0%, 92%);
@@ -140,6 +171,11 @@
 	--accent-alt: var(--accent-pink-alt);
 	--accent-green: hsl(140, 70%, 74%);
 	--accent-green-alt: hsl(140, 64%, 42%);
+	--accent-pink-transparent: hsla(303, 100%, 50%, 0);
+	--accent-red-transparent: hsla(348, 100%, 50%, 0);
+	--accent-purple-transparent: hsla(264, 100%, 50%, 0);
+	--accent-blue-transparent: hsla(220, 100%, 50%, 0);
+	--accent-green-transparent: hsla(140, 70%, 30%, 0);
 
 	// foregrounds
 	--fg: hsl(0, 0%, 100%);
@@ -151,65 +187,91 @@
 
 	// backgrounds
 	--bg: hsl(220, 5%, 15%);
+
+	--bg-gradient-from: hsla(303, 100%, 50%, 0.1);
+	--bg-gradient-to: hsla(303, 100%, 50%, 0);
+	--bg-gradient-pink-from: hsla(303, 100%, 50%, 0.1);
+	--bg-gradient-pink-to: hsla(303, 100%, 50%, 0);
+	--bg-gradient-pink-alt-from: var(--accent-pink);
+	--bg-gradient-pink-alt-to: hsl(303, 100%, 91%);
+	--bg-gradient-red-from: hsla(348, 100%, 50%, 0.1);
+	--bg-gradient-red-to: hsla(348, 100%, 50%, 0);
+	--bg-gradient-red-alt-from: var(--accent-red);
+	--bg-gradient-red-alt-to: hsl(348, 100%, 91%);
+	--bg-gradient-purple-from: hsla(264, 100%, 50%, 0.1);
+	--bg-gradient-purple-to: hsla(264, 100%, 50%, 0);
+	--bg-gradient-purple-alt-from: var(--accent-purple);
+	--bg-gradient-purple-alt-to: hsl(264, 100%, 91%);
+	--bg-gradient-blue-from: hsla(220, 100%, 50%, 0.1);
+	--bg-gradient-blue-to: hsla(220, 100%, 50%, 0);
+	--bg-gradient-blue-alt-from: var(--accent-blue);
+	--bg-gradient-blue-alt-to: hsl(220, 100%, 91%);
+	--bg-gradient-green-from: hsla(140, 70%, 30%, 0.1);
+	--bg-gradient-green-to: hsla(140, 70%, 30%, 0);
+	--bg-gradient-green-alt-from: var(--accent-green-alt);
+	--bg-gradient-green-alt-to: hsl(140, 70%, 91%);
+	--bg-gradient-image-from: hsla(220, 5%, 12%, 0.5);
+	--bg-gradient-image-to: hsla(220, 5%, 12%, 1);
+
 	--bg-gradient: linear-gradient(
 		to bottom,
-		hsla(303, 100%, 50%, 0.1),
-		hsla(303, 100%, 50%, 0) 100%
+		var(--bg-gradient-from),
+		var(--bg-gradient-to) 100%
 	);
 	--bg-gradient-pink: linear-gradient(
 		to bottom,
-		hsla(303, 100%, 50%, 0.1),
-		hsla(303, 100%, 50%, 0) 25%
+		var(--bg-gradient-pink-from),
+		var(--bg-gradient-pink-to) 25%
 	);
 	--bg-gradient-pink-alt: linear-gradient(
 		to top,
-		var(--accent-pink),
-		hsl(303, 100%, 91%) 100%
+		var(--bg-gradient-pink-alt-from),
+		var(--bg-gradient-pink-alt-to) 100%
 	);
 	--bg-gradient-red: linear-gradient(
 		to bottom,
-		hsla(348, 100%, 50%, 0.1),
-		hsla(348, 100%, 50%, 0) 25%
+		var(--bg-gradient-red-from),
+		var(--bg-gradient-red-to) 25%
 	);
 	--bg-gradient-red-alt: linear-gradient(
 		to top,
-		var(--accent-red),
-		hsl(348, 100%, 91%) 100%
+		var(--bg-gradient-red-alt-from),
+		var(--bg-gradient-red-alt-to) 100%
 	);
 	--bg-gradient-purple: linear-gradient(
 		to bottom,
-		hsla(264, 100%, 50%, 0.1),
-		hsla(264, 100%, 50%, 0) 25%
+		var(--bg-gradient-purple-from),
+		var(--bg-gradient-purple-to) 25%
 	);
 	--bg-gradient-purple-alt: linear-gradient(
 		to top,
-		var(--accent-purple),
-		hsl(264, 100%, 91%) 100%
+		var(--bg-gradient-purple-alt-from),
+		var(--bg-gradient-purple-alt-to) 100%
 	);
 	--bg-gradient-blue: linear-gradient(
 		to bottom,
-		hsla(220, 100%, 50%, 0.1),
-		hsla(220, 100%, 50%, 0) 25%
+		var(--bg-gradient-blue-from),
+		var(--bg-gradient-blue-to) 25%
 	);
 	--bg-gradient-blue-alt: linear-gradient(
 		to top,
-		var(--accent-blue),
-		hsl(220, 100%, 91%) 100%
+		var(--bg-gradient-blue-alt-from),
+		var(--bg-gradient-blue-alt-to) 100%
 	);
 	--bg-gradient-green: linear-gradient(
 		to bottom,
-		hsla(140, 70%, 30%, 0.1),
-		hsla(140, 70%, 30%, 0) 25%
+		var(--bg-gradient-green-from),
+		var(--bg-gradient-green-to) 25%
 	);
 	--bg-gradient-green-alt: linear-gradient(
 		to top,
-		var(--accent-green-alt),
-		hsl(140, 70%, 91%) 100%
+		var(--bg-gradient-green-alt-from),
+		var(--bg-gradient-green-alt-to) 100%
 	);
 	--bg-gradient-image: linear-gradient(
 		to bottom,
-		hsla(220, 5%, 12%, 0.5),
-		hsla(220, 5%, 12%, 1) 100%
+		var(--bg-gradient-image-from),
+		var(--bg-gradient-image-to) 100%
 	);
 	--bg-panel: hsl(220, 4%, 24%);
 	--bg-panel-highlight: hsl(220, 2%, 32%);
diff --git a/src/lib/components/layout/Gradients.svelte b/src/lib/components/layout/Gradients.svelte
index 40d1101..73ef662 100644
--- a/src/lib/components/layout/Gradients.svelte
+++ b/src/lib/components/layout/Gradients.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/state";
-	import { duration } from "$lib/animation";
+	import { duration, transition } from "$lib/animation";
 	import VertVBig from "$lib/assets/vert-bg.svg?component";
 	import {
 		files,
@@ -9,6 +9,63 @@
 	} from "$lib/store/index.svelte";
 	import { quintOut } from "svelte/easing";
 	import { fade } from "$lib/animation";
+	import { Tween } from "svelte/motion";
+
+	const colors: {
+		matcher: (path: string) => boolean;
+		color: string;
+		at: number;
+	}[] = $derived([
+		{
+			matcher: (path) => path === "/",
+			color: "var(--bg-gradient-from)",
+			at: 100,
+		},
+		{
+			matcher: (path) => path === "/convert/",
+			color: `var(--bg-gradient-${$gradientColor ? $gradientColor + "-" : ""}from)`,
+			at: 25,
+		},
+		{
+			matcher: (path) => path === "/settings/",
+			color: "var(--bg-gradient-blue-from)",
+			at: 25,
+		},
+		{
+			matcher: (path) => path === "/about/",
+			color: "var(--bg-gradient-from)",
+			at: 25,
+		},
+		{
+			matcher: (path) => path === "/jpegify/",
+			color: "var(--bg-gradient-red-from)",
+			at: 100,
+		},
+	]);
+
+	const color = $derived(
+		Object.values(colors).find((p) => p.matcher(page.url.pathname)) || {
+			matcher: () => false,
+			color: "transparent",
+			at: 0,
+		},
+	);
+
+	// svelte-ignore state_referenced_locally This is handled in the effect below
+	let at = new Tween(color.at, {
+		duration,
+		easing: quintOut,
+	});
+
+	$effect(() => {
+		at.set(color.at);
+	});
+
+	const maskImage = $derived(
+		`linear-gradient(to top, transparent ${100 - at.current}%, black 100%)`,
+	);
+
+	$inspect(colors);
 </script>
 
 {#if page.url.pathname === "/"}
@@ -23,6 +80,33 @@
 			class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
 		/>
 	</div>
+{/if}
+
+<div
+	class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+	style="background-color: {color.color}; 
+	mask-image: {maskImage}; 
+	-webkit-mask-image: {maskImage};
+	transition: background-color {duration}ms {transition};"
+></div>
+
+{#if page.url.pathname === "/convert/" && files.files.length === 1}
+	{@const bgMask =
+		"linear-gradient(to top, transparent 5%, rgba(0, 0, 0, 0.5) 100%)"}
+	<div
+		class="fixed top-0 left-0 w-screen h-screen -z-50"
+		style="background-image: url({files.files[0].blobUrl});
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		filter: blur(10px);
+		mask-image: {bgMask};
+		-webkit-mask-image: {bgMask};"
+		transition:fade={{ duration, easing: quintOut }}
+	></div>
+{/if}
+
+<!-- 
 	<div
 		id="gradient-bg"
 		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
@@ -64,14 +148,6 @@
 				class="absolute top-0 left-0 w-full h-full"
 				style="background: var(--bg-gradient-image);"
 			></div>
-			<!-- <div class="absolute bottom-0 left-0 w-full h-full">
-				<ProgressiveBlur
-					direction="bottom"
-					endIntensity={256}
-					iterations={8}
-					fadeTo="var(--bg)"
-				/>
-			</div> -->
 		</div>
 	</div>
 {:else if page.url.pathname === "/settings/"}
@@ -94,4 +170,4 @@
 			easing: quintOut,
 		}}
 	></div>
-{/if}
+{/if} -->