Morphing Text

A cinematic text animation that morphs fluidly between a sequence of strings using advanced SVG filters and blur blending.

Installation

npx raya-ui@latest add morphing-text

File Structure

your-project

components

morphing-text

MorphingText.vue

API Reference

Props

texts

string[]

An array of strings to cycle through endlessly.

morphTime

number

1.5

The duration of the actual morphing transition (blur to sharp) in seconds.

coolDownTime

number

0.5

The duration the text stays fully visible and sharp before morphing into the next string.

Settings

Word Sequence

Comma separated list of words to morph between.

Morphing Duration1.5s

Read Time (Cooldown)0.5s

source-code.vue

<script setup lang="ts">
import { MorphingText } from '@/components/ui/morphing-text'

const texts = [
  "Raya",
  "UI",
  "Is",
  "Awesome"
]
</script>

<template>
  <MorphingText
    :texts="texts"
  />
</template>