Weight Wave

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

Props

Base Weight

200

Hover Weight

800

Influence Radius

Falloff Power

1.500

Duration

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>

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