Motion Core

Typography

Text Loop

A text animator that cycles through phrases with blurred vertical transitions, suitable for headlines.

gsap

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 —