Motion Core

Typography

Weight Wave

A hover-reactive text effect that smoothly increases glyph weight with a falloff across neighboring characters.

gsap

Installation

Install the component

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

Import the component

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

Usage

Motion Core

Props

200
800
3
1.500
1.000s
<script lang="ts">
	import { WeightWave } from "motion-core";
	import type { ComponentProps } from "svelte";

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

	let {
		baseWeight = 200,
		hoverWeight = 800,
		influenceRadius = 3,
		falloffPower = 1.5,
		duration = 1,
	}: Props = $props();
</script>

<WeightWave
	class="font-variable text-6xl md:text-8xl"
	{baseWeight}
	{hoverWeight}
	{influenceRadius}
	{falloffPower}
	{duration}
>
	Motion Core
</WeightWave>

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

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

	let {
		baseWeight = 200,
		hoverWeight = 800,
		influenceRadius = 3,
		falloffPower = 1.5,
		duration = 1,
	}: Props = $props();
</script>

<WeightWave
	class="font-variable text-6xl md:text-8xl"
	{baseWeight}
	{hoverWeight}
	{influenceRadius}
	{falloffPower}
	{duration}
>
	Motion Core
</WeightWave>

Props

WeightWave

PropTypeDefault
children
Snippet —
baseWeight
number 350
hoverWeight
number 750
influenceRadius
number 3
falloffPower
number 1.5
duration
number 1.0
ease
string "power3.out"
class
string ""