Skip to main content
Complete reference for all props available on the <MorphText> component from griffo/morph.

​
Content

​
children
string
required
The text content to display. When this changes, the component will morph between the old and new text.
<MorphText>{dynamicText}</MorphText>

​
Split options

​
splitBy
'chars' | 'words'
default:"'chars'"
How to split the text into tokens for morphing.
  • "chars" - Split into individual characters
  • "words" - Split into words (separated by spaces)
<MorphText splitBy="words">{text}</MorphText>

​
Animation props

​
initial
MotionInitialProp
Animation state for entering tokens. Can be a static object or a function that receives variant info.Static:
<MorphText initial={{ opacity: 0, y: -20 }}>
  {text}
</MorphText>
Function:
<MorphText
  initial={({ index, count }) => ({
    opacity: 0,
    y: index % 2 === 0 ? -20 : 20,
  })}
>
  {text}
</MorphText>
MorphVariantInfo:
  • index - Index of this token among all animated tokens
  • count - Total number of animated tokens
​
animate
MotionAnimateProp
Target animation state for all visible tokens.Static:
<MorphText animate={{ opacity: 1, y: 0 }}>
  {text}
</MorphText>
Function:
<MorphText
  animate={({ index }) => ({
    opacity: 1,
    y: 0,
    transition: { delay: index * 0.02 },
  })}
>
  {text}
</MorphText>
​
exit
MotionExitProp
Animation state for exiting tokens.Static:
<MorphText exit={{ opacity: 0, scale: 0.5 }}>
  {text}
</MorphText>
Function:
<MorphText
  exit={({ index, count }) => ({
    opacity: 0,
    x: index <= count / 2 ? -50 : 50,
  })}
>
  {text}
</MorphText>
​
transition
AnimationOptions
Default transition options for all animations.
<MorphText
  transition={{
    type: "spring",
    bounce: 0.3,
    duration: 0.6
  }}
>
  {text}
</MorphText>
Supports all Motion transition options including springs, tweens, and easing functions.
​
stagger
number
Delay between each token’s animation in seconds.
<MorphText
  stagger={0.05}
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
>
  {text}
</MorphText>
This is a convenience prop that applies stagger to entering tokens. For more control, use function variants with custom transition delays.
​
animateInitial
boolean
default:false
Whether to animate on initial mount.
<MorphText
  animateInitial={true}
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
>
  {text}
</MorphText>
When false (default), the first render will skip the initial animation and render directly in the animate state.

​
Styling

​
as
keyof HTMLElementTagNameMap
default:"'div'"
The HTML element to render as the wrapper.
<MorphText as="span">{text}</MorphText>
<MorphText as="h1">{text}</MorphText>
​
className
string
CSS class name for the wrapper element.
<MorphText className="text-lg font-bold">{text}</MorphText>
​
style
CSSProperties
Inline styles for the wrapper element.
<MorphText style={{ fontSize: 24, fontWeight: "bold" }}>
  {text}
</MorphText>

​
Behavior

​
waitForFonts
boolean
default:true
Whether to wait for fonts to load before rendering.
<MorphText waitForFonts={false}>{text}</MorphText>
Set to false if you’re using system fonts or have already loaded fonts.
​
reducedMotion
'user' | 'always' | 'never'
default:"'user'"
How to handle prefers-reduced-motion.
  • "user" - Respect system preference
  • "always" - Always reduce motion
  • "never" - Never reduce motion
<MorphText reducedMotion="never">{text}</MorphText>

​
Callbacks

​
onMorphComplete
() => void
Called when the morph animation completes.
<MorphText
  onMorphComplete={() => {
    console.log("Morph finished");
    // Trigger next action
  }}
>
  {text}
</MorphText>

​
Other props

<MorphText> also accepts all other HTML attributes and Motion props not listed above (excluding controlled props like children, initial, animate, exit).

​
Type definitions

interface MorphVariantInfo {
  /** Index of this element among all animated elements */
  index: number;
  /** Total number of animated elements */
  count: number;
}

type MotionInitialProp =
  | HTMLMotionProps<"div">["initial"]
  | ((info: MorphVariantInfo) => HTMLMotionProps<"div">["initial"]);

type MotionAnimateProp =
  | HTMLMotionProps<"div">["animate"]
  | ((info: MorphVariantInfo) => HTMLMotionProps<"div">["animate"]);

type MotionExitProp =
  | HTMLMotionProps<"div">["exit"]
  | ((info: MorphVariantInfo) => HTMLMotionProps<"div">["exit"]);

Build docs developers (and LLMs) love

Get started for freeTalk to us