Motion Core

Typography

Text Repel

A cursor-reactive text wrapper that splits content into words or characters and gently pushes each item away from the pointer.

gsap

Installation

Install the component

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

Import the component

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

Usage

Motion reacts to the cursor with a soft field of spatial tension.

Props

18px
160px
1.500
0.450s
<script lang="ts">
	import { TextRepel } from "motion-core";
	import type { ComponentProps } from "svelte";

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

	let {
		mode = "words",
		strength = 18,
		radius = 160,
		falloffPower = 1.5,
		duration = 0.45,
		ease = "power3.out",
	}: Props = $props();
</script>

<TextRepel
	class="max-w-3xl px-6 text-center text-4xl leading-tight font-medium tracking-tight text-foreground md:text-6xl"
	{mode}
	{strength}
	{radius}
	{falloffPower}
	{duration}
	{ease}
>
	Motion reacts to the cursor with a soft field of spatial tension.
</TextRepel>

Props

TextRepel

PropTypeDefault
children
Snippet —
mode
"words""chars" "words"
strength
number 18
radius
number 160
falloffPower
number 1.5
duration
number 0.45
ease
string "power3.out"
hoverTarget
HTMLElementnull null
class
string ""