Add motion settings

src/lib/animation/index.ts

@@ -1,11 +1,29 @@
 import type { AnimationConfig, FlipParams } from "svelte/animate";
 import { cubicOut } from "svelte/easing";
+import {
+	fade as svelteFade,
+	fly as svelteFly,
+	type FadeParams,
+	type FlyParams,
+} from "svelte/transition";
 
 export const transition =
 	"linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)";
 
 export const duration = 500;
 
+export function fade(node: HTMLElement, options: FadeParams) {
+	if (localStorage.getItem("motion") === "false") return {};
+	const animation = svelteFade(node, options);
+	return animation;
+}
+
+export function fly(node: HTMLElement, options: FlyParams) {
+	if (localStorage.getItem("motion") === "false") return {};
+	const animation = svelteFly(node, options);
+	return animation;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function is_function(thing: unknown): thing is Function {
 	return typeof thing === "function";

src/lib/components/functional/Dropdown.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { duration, transition } from "$lib/animation";
+	import { duration, fade, transition } from "$lib/animation";
 	import { ChevronDown } from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
-	import { fade } from "svelte/transition";
 
 	type Props = {
 		options: string[];

src/lib/components/functional/FancyMenu.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import { page } from "$app/stores";
-	import { duration } from "$lib/animation";
+	import { duration, fly } from "$lib/animation";
 	import clsx from "clsx";
 	import { onMount, tick } from "svelte";
 	import { quintOut } from "svelte/easing";
 	import type { Writable } from "svelte/store";
-	import { fly } from "svelte/transition";
 
 	interface Props {
 		links: {

src/lib/components/functional/Navbar.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import { page } from "$app/stores";
-	import { duration } from "$lib/animation";
+	import { duration, fade } from "$lib/animation";
 	import { setTheme } from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
-	import { fade } from "svelte/transition";
 	import Panel from "../visual/Panel.svelte";
 	import Logo from "../visual/svg/Logo.svelte";
 

src/lib/sections/settings/Appearance.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { log } from "$lib/logger";
-	import { setTheme } from "$lib/store/index.svelte";
+	import { setMotion, setTheme } from "$lib/store/index.svelte";
 	import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 
 	let lightElement: HTMLButtonElement;
 	let darkElement: HTMLButtonElement;
+	let enableMotionElement: HTMLButtonElement;
+	let disableMotionElement: HTMLButtonElement;
 
 	function setDark(dark: boolean) {
 		document.documentElement.classList.remove("light", "dark");
@@ -20,12 +21,22 @@
 			lightElement.classList.add("bg-accent-purple");
 			setTheme("light");
 		}
+	}
 
-		log
+	function setAnimation(motion: boolean) {
+		if (motion) {
+			enableMotionElement.classList.add("bg-accent-purple");
+			disableMotionElement.classList.remove("bg-accent-purple");
+			setMotion(true);
+		} else {
+			disableMotionElement.classList.add("bg-accent-purple");
+			enableMotionElement.classList.remove("bg-accent-purple");
+			setMotion(false);
+		}
 	}
 
 	onMount(() => {
-		const updateClasses = () => {
+		const updateTheme = () => {
 			const list = document.documentElement.classList;
 			if (list.contains("dark")) {
 				lightElement.classList.remove("bg-accent-purple");
@@ -36,10 +47,18 @@
 			}
 		};
 
-		updateClasses();
+		updateTheme();
 
-		// use MutationObserver to check when theme is changed (<html> classes)
-		const observer = new MutationObserver(updateClasses);
+		if (localStorage.getItem("motion") === "true") {
+			enableMotionElement.classList.add("bg-accent-purple");
+			disableMotionElement.classList.remove("bg-accent-purple");
+		} else {
+			disableMotionElement.classList.add("bg-accent-purple");
+			enableMotionElement.classList.remove("bg-accent-purple");
+		}
+
+		// use MutationObserver to check when theme is changed (<html> class changes)
+		const observer = new MutationObserver(updateTheme);
 
 		observer.observe(document.documentElement, {
 			attributes: true,
@@ -90,6 +109,36 @@
 					</div>
 				</div>
 			</div>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-2">
+					<p class="text-base font-bold">Motion settings</p>
+					<p class="text-sm text-muted font-normal italic">
+						Would you like fancy animations, or a more static
+						experience?
+					</p>
+				</div>
+				<div class="flex flex-col gap-3 w-full">
+					<div class="flex gap-3 w-full">
+						<button
+							bind:this={enableMotionElement}
+							onclick={() => setAnimation(true)}
+							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-centerr"
+						>
+							<SunIcon size="24" class="inline-block mr-2" />
+							Enable Animations
+						</button>
+
+						<button
+							bind:this={disableMotionElement}
+							onclick={() => setAnimation(false)}
+							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-centerr"
+						>
+							<MoonIcon size="24" class="inline-block mr-2" />
+							Disable Animations
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </Panel>

src/lib/store/index.svelte.ts

@@ -183,6 +183,14 @@ export function setTheme(theme: "light" | "dark") {
 	log(["theme"], `set to ${theme}`);
 }
 
+export function setMotion(motion: boolean) {
+	localStorage.setItem("motion", motion.toString());
+	window.plausible("Motion set", {
+		props: { motion },
+	});
+	log(["motion"], `set to ${motion}`);
+}
+
 export const files = new Files();
 export const showGradient = writable(true);
 export const gradientColor = writable("");

src/routes/+layout.svelte

@@ -8,6 +8,7 @@
 	import Footer from "$lib/components/visual/Footer.svelte";
 	import Logo from "$lib/components/visual/svg/Logo.svelte";
 
+	import { fade, fly } from "$lib/animation";
 	import {
 		files,
 		gradientColor,
@@ -22,7 +23,6 @@
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
 	import { writable } from "svelte/store";
-	import { fade, fly } from "svelte/transition";
 	import "../app.scss";
 	let { children, data } = $props();
 

src/routes/convert/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { duration } from "$lib/animation";
+	import { duration, fade } from "$lib/animation";
 	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
 	import Dropdown from "$lib/components/functional/Dropdown.svelte";
 	import Uploader from "$lib/components/functional/Uploader.svelte";
@@ -21,7 +21,6 @@
 		XIcon,
 	} from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
-	import { fade } from "svelte/transition";
 
 	$effect(() => {
 		if (files.files.length === 1 && files.files[0].blobUrl) {