Text morph

Morph a label into its next state, letter by letter.

npx shadcn@latest add @silicon-ui/text-morph
textmotionstatus
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/text-morph

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/text-morph/text-morph.tsx
    • components/silicon-ui/text-morph/text-morph.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { TextMorph } from "@/components/silicon-ui/text-morph/text-morph";

API reference

PropTypeDefault
children*string—
as"span" | "div" | "p" | "strong" | "h1" | "h2" | "h3""span"
classNamestring—
idstring—

Dependencies

npm
motion
Registry
silicon-motion-tokens