Word Rotate

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { motion, AnimatePresence, type MotionProps } from "motion-sv";
4	import { cn } from "$UTILS$";
5 
6	type ElementType = "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
7 
8	interface WordRotateProps {
9		words: string[];
10		duration?: number;
11		motionProps?: MotionProps;
12		class?: string;
13		as?: ElementType;
14	}
15 
16	let {
17		words,
18		duration = 2500,
19		motionProps = {
20			initial: { opacity: 0, y: -50 },
21			animate: { opacity: 1, y: 0 },
22			exit: { opacity: 0, y: 50 },
23			transition: { duration: 0.25, ease: "easeOut" },
24		},
25		class: className,
26		as = "h1",
27	}: WordRotateProps = $props();
28 
29	let MotionComponent = $derived(motion[as]);
30 
31	let index = $state(0);
32 
33	onMount(() => {
34		const interval = setInterval(() => {
35			index = (index + 1) % words.length;
36		}, duration);
37 
38		// Clean up interval on unmount
39		return () => clearInterval(interval);
40	});
41</script>
42 
43<!-- for some reason overflow hidden is not working - still in beta phase -->
44<!-- Original React implementation use mode="wait" but the animation doesn't work properly in svelte  -->
45<!-- React Implmentaion : https://magicui.design/docs/components/word-rotate -->
46 
47<div class="overflow-hidden py-2">
48	<!-- mode="popLayout" initial={false} -->
49 
50	<AnimatePresence mode="wait">
51		{#key words[index]}
52			<MotionComponent
53				class={cn(className)}
54				initial={motionProps.initial}
55				animate={motionProps.animate}
56				exit={motionProps.exit}
57				transition={motionProps.transition}
58			>
59				{words[index]}
60			</MotionComponent>
61		{/key}
62	</AnimatePresence>
63</div>