Split Text

A component that animates text by splitting it into words and applying staggered animations.

This is Ori UI

import SplitText from '$lib/components/ori/split-text/split-text.svelte';

<SplitText
	text="This is Ori UI"
	splitType="chars"
	delay="60"
	duration="800"
	class="text-2xl font-semibold text-center"
/>

Prop	Type	Default	Description
tag	string	‘p’	The HTML tag to render
text	string	”	The text content to animate
class	string	”	Additional CSS classes
delay	number	100	Delay between animations in ms
duration	number	600	Duration of the animation in ms
ease	string	‘easeOutExpo’	Easing function for the animation
splitType	string	‘chars’	How to split the text: ‘chars’ or ‘words’
loop	boolean	false	Whether the animation should loop
onAnimationCompletion	`() => void`	`() => {}`	Callback function when animation completes