Files
website/src/lib/components/fancy/animated-text.svelte
Jesse Winton 759b5c0894 updates
2025-04-17 15:44:43 -04:00

26 lines
640 B
Svelte

<script lang="ts">
import { classNames } from '$lib/utils/classnames';
interface Props {
text: string;
class?: string;
}
let { text, class: className = '' }: Props = $props();
const words = text.split(' ');
</script>
<span class="sr-only">{text}</span>
<span class={classNames('relative overflow-hidden', className)}>
{#each words as word, i}
<span class="relative overflow-hidden">
<span
class="animate-enter mr-2 inline-block"
style:animation-delay="{i * 75}ms
">{word}</span
>
</span>
{/each}
</span>