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

Prop	Type	Default
`texts`	`string[]`	`—`
`interval`	`number`	`2000`
`class`	`string`	`—`