Components
Text Morph
Text that morphs between different strings.
Text Morph
The TextMorph component creates text that morphs between different strings with smooth animations. It's perfect for creating dynamic text transitions and content changes.
Usage
<template>
<div class="p-4 space-y-4 flex flex-col items-center">
<MTextMorph :text="currentText" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="cycleText"
>
Change Text
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const texts = ['Hello', 'World', 'Vue', 'Nuxt']
const currentIndex = ref(0)
const currentText = computed(() => texts[currentIndex.value])
const cycleText = () => {
currentIndex.value = (currentIndex.value + 1) % texts.length
}
</script>
Props
text
string
Text to display and morph.
as
string
HTML element to render as.
className
string
CSS classes to apply to the container.
style
object
Custom styles to apply to the container.
variants
object
Custom animation variants.
transition
object
Animation transition options.
Examples
Basic Text Morph
Building Experiences
Create stunning interfaces with our collection of animated components that the way users interact with your applications.
Real-time Preview
See changes instantly as you type with our live preview feature
<template>
<div class="p-4 space-y-4 flex flex-col items-center">
<MTextMorph :text="currentText" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="cycleText"
>
Change Text
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const texts = ['Morphing Text', 'Is Super Cool', 'And Easy', 'To Use']
const currentIndex = ref(0)
const currentText = computed(() => texts[currentIndex.value])
const cycleText = () => {
currentIndex.value = (currentIndex.value + 1) % texts.length
}
</script>
As Heading Element
<template>
<div class="p-4 space-y-4 flex flex-col items-center">
<MTextMorph :text="currentText" as="h1" class="text-3xl font-bold" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="cycleText"
>
Change Text
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const texts = ['Heading Morph', 'Is Powerful', 'And Looks Great']
const currentIndex = ref(0)
const currentText = computed(() => texts[currentIndex.value])
const cycleText = () => {
currentIndex.value = (currentIndex.value + 1) % texts.length
}
</script>
With Custom Transition
Text Morphing
Morph Controls
Live Preview
Title Preview
Subtitle Preview
Example Usage
Feature Highlight
Performance
Optimized for performance with minimal load times
Stunning animations that captivate your audience
Simple to implement with clean, well-documented code
<template>
<div class="p-4 space-y-4 flex flex-col items-center">
<MTextMorph :text="currentText" :transition="{ type: 'spring', stiffness: 500, damping: 10 }" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="cycleText"
>
Change Text
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const texts = ['Bouncy Morph', 'Has Custom', 'Spring Physics']
const currentIndex = ref(0)
const currentText = computed(() => texts[currentIndex.value])
const cycleText = () => {
currentIndex.value = (currentIndex.value + 1) % texts.length
}
</script>
With Custom Variants
Text Morphing
Morph Controls
Live Preview
Title Preview
Subtitle Preview
Example Usage
Feature Highlight
Performance
Optimized for performance with minimal load times
Stunning animations that captivate your audience
Simple to implement with clean, well-documented code
<template>
<div class="p-4 space-y-4 flex flex-col items-center">
<MTextMorph :text="currentText" :variants="{ initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 20 } }" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="cycleText"
>
Change Text
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const texts = ['Custom Morph', 'With Variants', 'Is Awesome']
const currentIndex = ref(0)
const currentText = computed(() => texts[currentIndex.value])
const cycleText = () => {
currentIndex.value = (currentIndex.value + 1) % texts.length
}
</script>
Dynamic Text Change
<template>
<div class="p-4 space-y-4">
<MTextMorph :text="currentText" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="cycleText"
>
Change Text
</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const texts = ['First Text', 'Second Text', 'Third Text', 'Final Text']
const currentIndex = ref(0)
const currentText = computed(() => texts[currentIndex.value])
const cycleText = () => {
currentIndex.value = (currentIndex.value + 1) % texts.length
}
</script>