Text

Split Hover

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

Preview

Characters split into two stacked layers that swap on hover.

Attributes

pnpm dlx motion-blocks add split-hover

npx motion-blocks add split-hover

bunx --bun motion-blocks add split-hover

yarn dlx motion-blocks add split-hover

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

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

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

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

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

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