chore: rename motion to effects

src/lib/animation/index.ts

@@ -1,4 +1,4 @@
-import { isMobile, motion } from "$lib/store/index.svelte";
+import { isMobile, effects } from "$lib/store/index.svelte";
 import type { AnimationConfig, FlipParams } from "svelte/animate";
 import { cubicOut } from "svelte/easing";
 import {
@@ -9,11 +9,11 @@ import {
 } from "svelte/transition";
 
 // Subscribe to stores
-let motionEnabled = true;
+let effectsEnabled = true;
 let isMobileDevice = false;
 
-motion.subscribe(value => {
+effects.subscribe(value => {
-    motionEnabled = value;
+    effectsEnabled = value;
 });
 
 isMobile.subscribe(value => {
@@ -26,13 +26,13 @@ export const transition =
 export const duration = 500;
 
 export function fade(node: HTMLElement, options: FadeParams) {
-	if (!motionEnabled) return {};
+	if (!effectsEnabled) return {};
 	const animation = svelteFade(node, options);
 	return animation;
 }
 
 export function fly(node: HTMLElement, options: FlyParams) {
-	if (!motionEnabled || isMobileDevice) return {};
+	if (!effectsEnabled || isMobileDevice) return {};
 	const animation = svelteFly(node, options);
 	return animation;
 }

src/lib/components/functional/Navbar.svelte

@@ -2,7 +2,7 @@
 	import { browser } from "$app/environment";
 	import { page } from "$app/state";
 	import { duration, fade } from "$lib/animation";
-	import { motion, setTheme } from "$lib/store/index.svelte";
+	import { effects, setTheme } from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
@@ -111,7 +111,7 @@
 					.height}px; top: {linkRects[selectedIndex].top -
 					(containerRect?.top || 0)}px; left: {linkRects[
 					selectedIndex
-				].left - (containerRect?.left || 0)}px; {$motion
+				].left - (containerRect?.left || 0)}px; {$effects
 					? `transition: left var(--transition) ${duration}ms, top var(--transition) ${duration}ms;`
 					: ''}"
 			></div>

src/lib/sections/settings/Appearance.svelte

@@ -2,8 +2,8 @@
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import {
 		theme,
-		motion,
+		effects,
-		setMotion,
+		setEffects,
 		setTheme,
 	} from "$lib/store/index.svelte";
 	import {
@@ -17,19 +17,19 @@
 
 	let lightElement: HTMLButtonElement;
 	let darkElement: HTMLButtonElement;
-	let enableMotionElement: HTMLButtonElement;
+	let enableEffectsElement: HTMLButtonElement;
-	let disableMotionElement: HTMLButtonElement;
+	let disableEffectsElement: HTMLButtonElement;
 
-	let motionUnsubscribe: () => void;
+	let effectsUnsubscribe: () => void;
 	let themeUnsubscribe: () => void;
 
-	const updateMotionClasses = (value: boolean) => {
+	const updateEffectsClasses = (value: boolean) => {
 		if (value) {
-			enableMotionElement.classList.add("selected");
+			enableEffectsElement.classList.add("selected");
-			disableMotionElement.classList.remove("selected");
+			disableEffectsElement.classList.remove("selected");
 		} else {
-			disableMotionElement.classList.add("selected");
+			disableEffectsElement.classList.add("selected");
-			enableMotionElement.classList.remove("selected");
+			enableEffectsElement.classList.remove("selected");
 		}
 	};
 
@@ -47,12 +47,12 @@
 	};
 
 	onMount(() => {
-		motionUnsubscribe = motion.subscribe(updateMotionClasses);
+		effectsUnsubscribe = effects.subscribe(updateEffectsClasses);
 		themeUnsubscribe = theme.subscribe(updateThemeClasses);
 	});
 
 	onDestroy(() => {
-		if (motionUnsubscribe) motionUnsubscribe();
+		if (effectsUnsubscribe) effectsUnsubscribe();
 		if (themeUnsubscribe) themeUnsubscribe();
 	});
 </script>
@@ -99,17 +99,17 @@
 			</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-base font-bold">Effect settings</p>
 					<p class="text-sm text-muted font-normal italic">
-						Would you like fancy animations, or a more static
+						Would you like fancy effects, 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}
+							bind:this={enableEffectsElement}
-							onclick={() => setMotion(true)}
+							onclick={() => setEffects(true)}
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PlayIcon size="24" class="inline-block mr-2" />
@@ -117,8 +117,8 @@
 						</button>
 
 						<button
-							bind:this={disableMotionElement}
+							bind:this={disableEffectsElement}
-							onclick={() => setMotion(false)}
+							onclick={() => setEffects(false)}
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PauseIcon size="24" class="inline-block mr-2" />

src/lib/store/index.svelte.ts

@@ -217,13 +217,13 @@ export function setTheme(themeTo: "light" | "dark") {
 	theme.set(themeTo);
 }
 
-export function setMotion(motionEnabled: boolean) {
+export function setEffects(effectsEnabled: boolean) {
-	localStorage.setItem("motion", motionEnabled.toString());
+	localStorage.setItem("effects", effectsEnabled.toString());
-	window.plausible("Motion set", {
+	window.plausible("Effects set", {
-		props: { motion: motionEnabled },
+		props: { effects: effectsEnabled },
 	});
-	log(["motion"], `set to ${motionEnabled}`);
+	log(["effects"], `set to ${effectsEnabled}`);
-	motion.set(motionEnabled);
+	effects.set(effectsEnabled);
 }
 
 export const files = new Files();
@@ -231,5 +231,5 @@ export const showGradient = writable(true);
 export const gradientColor = writable("");
 
 export const isMobile = writable(false);
-export const motion = writable(true);
+export const effects = writable(true);
 export const theme = writable<"light" | "dark">("light");

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 		files,
 		gradientColor,
 		isMobile,
-		motion,
+		effects,
 		showGradient,
 		theme,
 	} from "$lib/store/index.svelte";
@@ -96,7 +96,7 @@
 			isMobile.set(window.innerWidth <= 768);
 		});
 
-		motion.set(localStorage.getItem("motion") !== "false"); // defaults to true if not set
+		effects.set(localStorage.getItem("effects") !== "false"); // defaults to true if not set
 		theme.set(
 			(localStorage.getItem("theme") as "light" | "dark") || "light",
 		);