Text

Weight Wave

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

Preview

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

Attributes

pnpm dlx motion-blocks add weight-wave

npx motion-blocks add weight-wave

bunx --bun motion-blocks add weight-wave

yarn dlx motion-blocks add weight-wave

---import "@/components/motion-blocks/weight-wave-element.ts";--- <motion-weight-wave text="Hover me"></motion-weight-wave>

import "@/components/motion-blocks/weight-wave-element.ts"; export default function Page() {  return (    <motion-weight-wave text="Hover me" />  );}

<script setup>import "@/components/motion-blocks/weight-wave-element.ts";</script> <template>  <motion-weight-wave text="Hover me" /></template>

<script>  import "@/components/motion-blocks/weight-wave-element.ts";</script> <motion-weight-wave text="Hover me" />

<script type="module" src="/components/motion-blocks/weight-wave-element.js"></script> <motion-weight-wave text="Hover me"></motion-weight-wave>