Rafi Wirana

Design Engineer

Preview

Work in Progress: This installation guide is still being refined. Some documentation may be incomplete.

Back to philosophy

Copy link

Dynamic Text

A dynamic text component that knows what changed and only animates what matters.

Morph (default)

Build is queued

Slide Up

Build is queued

Slide Right

Build is queued

Fade

Build is queued

Scale

Build is queued

Typewriter

Build is queued

Installation

✨ No external dependencies required

Component location

components/craft/DynamicText/index.tsx

Usage

Basic example

import { DynamicText } from '@/components/craft';
import { useState } from 'react';

export function Example() {
  const [text, setText] = useState('Building...');
  
  return (
    <DynamicText
      text={text}
      className="text-lg font-medium"
    />
  );
}

More Examples

Typewriter Mode

Character-by-character typing animation

<DynamicText
  text={status}
  mode="type"
  charIntervalMs={50}
/>

Smooth Morph (Default)

Smooth morphing transition between text changes

<DynamicText
  text={message}
  mode="morph"
  transitionMs={300}
/>

Slide Animation

Slide animation with directional control

<DynamicText
  text={text}
  mode="slide"
  direction="up"
  transitionMs={250}
/>

With Highlighting

Highlight the changing portion during animation

<DynamicText
  text={text}
  highlightClassName="text-blue-600 dark:text-blue-400"
/>

API Reference

Prop	Type	Default	Description
`text`Required	`string`	—	The text content to display with dynamic animation
`mode`	`"morph" \| "type" \| "fade" \| "slide" \| "scale"`	`"morph"`	Animation mode for text transitions
`charIntervalMs`	`number`	`50`	Interval between typed characters in milliseconds (type mode only)
`transitionMs`	`number`	`250`	Duration for morph/fade/slide/scale transitions in milliseconds
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Direction for slide animations
`highlightClassName`	`string`	—	Class applied to the changing segment while animating
`disableAnimation`	`boolean`	`false`	Disable animation entirely (also enabled automatically with prefers-reduced-motion)
`ariaLive`	`"off" \| "polite" \| "assertive"`	`"off"`	ARIA live region politeness for screen readers
`onAnimationStart`	`() => void`	—	Callback when animation starts
`onAnimationEnd`	`() => void`	—	Callback when animation ends
`as`	`"span" \| "div"`	`"span"`	Wrapper element type
`className`	`string`	—	Additional CSS classes