Text Morph

Renders animated text transitions using morphing tokens. It animates text changes by sliding, popping, and fading tokens. Use it to create smooth text animations in UIs.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/text-morph

npx layro-cli add @educlopez/text-morph

npx layro-cli add @educlopez/text-morph

bunx layro-cli add @educlopez/text-morph

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ElementType } from "react";
import { useMemo } from "react";

export type TextMorphMode = "characters" | "words";
export type TextMorphAlign = "start" | "center" | "end";
export type TextMorphTag = "span" | "div" | "p" | "h1" | "h2" | "h3" | "h4";

export interface TextMorphProps {
  /** Justifies the token row when the wrapper is wider than the text. */
  align?: TextMorphAlign;