From 3e09b53e3ad5ddbdb258351f904fa1b4e9aa7740 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 21 Apr 2024 08:23:55 -0700
Subject: feat(RandomFollower): use TextTransition

---
 src/lib/TextTransition.svelte | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/lib/TextTransition.svelte

(limited to 'src/lib/TextTransition.svelte')

diff --git a/src/lib/TextTransition.svelte b/src/lib/TextTransition.svelte
new file mode 100644
index 00000000..bd7814de
--- /dev/null
+++ b/src/lib/TextTransition.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	export let text = '';
+	export let opacityTransitionDuration = 50;
+	export let blurTransitionDuration = opacityTransitionDuration;
+	export let easing = cubicOut;
+
+	let previousValue = '';
+	let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
+	let blur = tweened(0, { duration: blurTransitionDuration, easing });
+
+	$: {
+		if (text !== previousValue)
+			Promise.all([opacity.set(0), blur.set(10)]).then(() => {
+				previousValue = text;
+
+				Promise.all([opacity.set(1), blur.set(0)]);
+			});
+	}
+</script>
+
+<span
+	style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;"
+>
+	{previousValue}
+</span>
-- 
cgit v1.2.3