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
npx @motion-core/cli add text-loop
pnpm dlx @motion-core/cli add text-loop
pnpm dlx @motion-core/cli add text-loop
bunx @motion-core/cli add text-loop
bunx @motion-core/cli add text-loop
yarn dlx @motion-core/cli add text-loop
yarn dlx @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

Props

2000ms
<script lang="ts">
	import { TextLoop } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof TextLoop>>;

	let { interval = 2000 }: Props = $props();
</script>

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

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

	type Props = Partial<ComponentProps<typeof TextLoop>>;

	let { interval = 2000 }: Props = $props();
</script>

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

Props

TextLoop

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