Text Repel

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add text-repel

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

Mode

Strength

18px

Radius

160px

Falloff

1.500

Duration

0.450s

Ease

<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>

<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

Prop	Type	Default
`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`	`""`