Morphing Text

Smoothly transition between words

Use the MorphingText component to smoothly transition between words. The component creates captivating visuals that grab users attention and makes a memorable impression.

<MorphingText texts={['Astro', 'Svelte', 'React']} />

The component only expects an array of strings for the texts prop to make it work. You can define as many words as you need.

Colors

The words are created using native HTML elements, meaning you can use CSS to style the text in any way you like. For example, to change the color of the text, you can use the className prop to attach a class name to the element that you can target with CSS:

<MorphingText
    texts={['Astro', 'Svelte', 'React']}
    className="morphing-text"
/>

<style is:global>
    .morphing-text {
        color: var(--w-color-info);
    }
</style>

Animation Timing

By default, the animation plays over 1000ms. This, along with the delay between words can be configured with the animationTime and wordDelay props. Both props expect the time in seconds:

<MorphingText
    texts={['Astro', 'Svelte', 'React']}
    animationTime={2}
    wordDelay={2}
/>

Sizes

Although font-size can be changed through CSS, the component has a size prop you can use to make size adjustments quicker. Changing the size will affect the effect of the animation.

<MorphingText
    texts={['Astro', 'Svelte', 'React']}
    size="42pt"
/>

API

type MorphingTextProps = {
    texts: string[]
    size?: string
    animationTime?: number
    wordDelay?: number
    className?: string
}