Text

Split Hover

Splits text into characters and animates stacked layers on hover for a seamless swap. Framework-agnostic Custom Element.

lit
gsap

Preview

Characters split into two stacked layers that swap on hover.

Attributes

Installation

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

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

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

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

Usage

---
import "@/components/motion-kit/split-hover-element.ts";
---

<motion-split-hover text="Hover me"></motion-split-hover>

import "@/components/motion-kit/split-hover-element.ts";

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

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

<template>
  <motion-split-hover text="Hover me" />
</template>

<script>
  import "@/components/motion-kit/split-hover-element.ts";
</script>

<motion-split-hover text="Hover me" />

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

<motion-split-hover text="Hover me"></motion-split-hover>

API Reference

Attribute	Type	Default
`text`	`string`	`""`