Motion Core

Text Loop

TextLoop creates an engaging headline effect by cycling through a list of words or phrases. It uses a vertical slide and blur transition to smoothly swap text elements, perfect for highlighting key features or roles.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add text-loop

Import the component

Import the component into your Svelte file: 
import { TextLoop } from "$lib/motion-core";
import { TextLoop } from "$lib/motion-core";

Usage

Create magic today

<script lang="ts">
	import { TextLoop } from "motion-core";
</script>

<p class="text-center text-5xl font-medium text-foreground">
	Create <TextLoop
		class="text-accent"
		texts={["magic", "wonder", "impact", "value"]}
		interval={2000}
	/> today
</p>

Props

TextLoop

PropTypeDefault
texts
string[] —
interval
number 2000
class
string —