Text

Text Repel

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

lit
gsap

Preview

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

Attributes

Installation

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

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

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

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

Usage

---
import "@/components/motion-kit/text-repel-element.ts";
---

<motion-text-repel text="Hover over me" mode="words"></motion-text-repel>

import "@/components/motion-kit/text-repel-element.ts";

export default function Page() {
  return (
    <motion-text-repel text="Hover over me" mode="words" />
  );
}

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

<template>
  <motion-text-repel text="Hover over me" mode="words" />
</template>

<script>
  import "@/components/motion-kit/text-repel-element.ts";
</script>

<motion-text-repel text="Hover over me" mode="words" />

<script type="module" src="/components/motion-kit/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`	`""`