Text morph ported

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

Morphs one short label into the next in place.

Live specimen

Loading demo…

Guidance

When to use

Status words that change a few letters at a time, such as Publish, Publishing, and Published, or Follow and Following.
Short single-line labels where the surrounding layout should glide instead of jump.

When not to use

Use slot-text for prices and stats that deserve a slot-machine spin.
Use text-shimmer for ongoing-work status lines rather than completed state changes.

Installation

pnpm add sveltearc

Usage

<script lang="ts">
  import { TextMorph } from '$lib/components/text-morph';
</script>

<TextMorph as="span">Published</TextMorph>

Variants & Examples

Default

Standard appearance and configuration.

<TextMorph as="strong">Published</TextMorph>

API Reference

Prop	Type	Default	Description
`children`	`string`	–	(Required) The label to show. Changing it morphs the letters in place (Phase 2).
`as`	`"span" \| "div" \| "p" \| "strong" \| "h1" \| "h2" \| "h3"`	"span"	Wrapper element for the label.
`class`	`string`	–	Merged onto the wrapper element.
`id`	`string`	–	Forwarded to the wrapper element, e.g. for aria-labelledby.

Accessibility

Assistive technology reads the plain label text from a visually hidden span; the animated glyphs are aria-hidden.
It stays on one line; keep labels short.

Motion

Phase-1 still-port: the current label renders in its settled end state statically — the glyph-sharing morph, width-follow spring and stagger are deferred to Phase 2, with a reduced-motion instant path.

Notes for AI

Pass the label as children text; change it to morph (animated in Phase 2).
Best for labels that share most of their letters between states.

Source of truth: registry/components/text-morph/text-morph.tsx