Text

Text Repel

Splits text into words or characters that repel from the pointer. Framework-agnostic Custom Element.

Preview

Words or characters repel from the pointer with a distance-based falloff.

Attributes

Installation

pnpm dlx motion-blocks add text-repel

npx motion-blocks add text-repel

bunx --bun motion-blocks add text-repel

yarn dlx motion-blocks add text-repel

Usage

---import "@/components/motion-blocks/text-repel-element.ts";--- <motion-text-repel text="Hover over me" mode="words"></motion-text-repel>

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

<script setup>import "@/components/motion-blocks/text-repel-element.ts";</script> <template>  <motion-text-repel text="Hover over me" mode="words" /></template>

<script>  import "@/components/motion-blocks/text-repel-element.ts";</script> <motion-text-repel text="Hover over me" mode="words" />

<script type="module" src="/components/motion-blocks/text-repel-element.js"></script> <motion-text-repel text="Hover over me" mode="words"></motion-text-repel>

API Reference

Attribute	Type	Default
`text`	`string`	`""`
`mode`	`"words" \| "chars"`	`"words"`
`strength`	`number`	`18`
`radius`	`number`	`160`
`falloff-power`	`number`	`1.5`
`duration`	`number`	`0.45`
`ease`	`string`	`"power3.out"`
`hover-target`	`string`	`""`