Components
Typing Text
Typing effect for text content.
Typing Text
The TypingText component creates a typing effect for text content. It's perfect for creating dynamic text entrances that simulate typing on a keyboard.
Usage
|
<template>
<MTypingText text="Typing Text" />
</template>
Props
text
string
Text to type.
texts
string[]
Array of texts to cycle through.
speed
number
Typing speed in milliseconds.
delay
number
Delay before starting animation.
showCursor
boolean
Whether to show cursor.
cursor
string
Cursor character.
cursorClass
string
CSS classes for cursor.
loop
boolean
Whether to loop through texts.
pauseDuration
number
Pause duration between loops.
class
string
CSS classes to apply to the container.
onComplete
function
Callback when typing completes.
startOnView
boolean
Start animation when component enters viewport.
once
boolean
Animate only once.
animation
string
Animation preset to use.
inViewMargin
string
Margin for in-view detection.
Examples
Basic Typing Text
Welcome to Our Platform
|
<template>
<MTypingText text="Hello World" />
</template>
Fast Typing
|
<template>
<MTypingText text="Fast Typing" :speed="50" />
</template>
Custom Cursor
???
<template>
<MTypingText text="Custom Cursor" cursor="???" cursor-class="text-blue-500" />
</template>
Slide Up Animation
|
<template>
<MTypingText text="Slide Up" animation="slideUp" />
</template>
Styled Typing
|
<template>
<MTypingText text="Styled Typing" class="text-2xl font-bold text-purple-600" />
</template>
Manual Control
|
<template>
<div class="space-y-4">
<div class="flex space-x-2">
<UButton @click="typingRef?.start()">Start</UButton>
<UButton @click="typingRef?.pause()">Pause</UButton>
<UButton @click="typingRef?.reset()">Reset</UButton>
</div>
<MTypingText
ref="typingRef"
text="Manual Control"
:auto-start="false"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const typingRef = ref()
</script>