Text

Weight Wave

Hover-reactive text effect that smoothly increases font weight with a falloff across neighboring characters. Requires a variable font.

lit
gsap

Preview

Move your cursor over the text to shift font weight with a smooth falloff. Requires a variable font.

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/weight-wave.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/weight-wave.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/weight-wave.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/weight-wave.json

Usage

---
import "@/components/motion-kit/weight-wave-element.ts";
---

<motion-weight-wave text="Hover me"></motion-weight-wave>

import "@/components/motion-kit/weight-wave-element.ts";

export default function Page() {
  return (
    <motion-weight-wave text="Hover me" />
  );
}

<script setup>
import "@/components/motion-kit/weight-wave-element.ts";
</script>

<template>
  <motion-weight-wave text="Hover me" />
</template>

<script>
  import "@/components/motion-kit/weight-wave-element.ts";
</script>

<motion-weight-wave text="Hover me" />

<script type="module" src="/components/motion-kit/weight-wave-element.js"></script>

<motion-weight-wave text="Hover me"></motion-weight-wave>

API Reference

Attribute	Type	Default
`text`	`string`	`""`
`base-weight`	`number`	`350`
`hover-weight`	`number`	`750`
`influence-radius`	`number`	`3`
`falloff-power`	`number`	`1.5`
`duration`	`number`	`1.0`
`ease`	`string`	`"power3.out"`