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

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

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

<WeightWave
	class="text-6xl font-display md:text-8xl"
	baseWeight={200}
	hoverWeight={900}
>
	Motion Core
</WeightWave>

Props

WeightWave

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