Skip to main content
Animate text with vibrant color transitions and motion effects for each character.

​
Usage

<ColourfulText
  text="Your colorful text"
  :colors="[
    'rgb(131, 179, 32)',
    'rgb(47, 195, 106)',
    'rgb(42, 169, 210)',
    'rgb(4, 112, 202)'
  ]"
  startColor="rgb(255,255,255)"
  :duration="5"
/>

​
Props

​
text
string
default:"black"
The text string to be rendered with colorful animated characters. Each character will be individually animated with color transitions and motion effects.
​
colors
string[]
default:"[various colors]"
Array of colors for the text animation. Default includes 10 vibrant colors ranging from green to orange.
​
startColor
string
default:"rgb(255,255,255)"
The starting color for each character.
​
duration
number
default:"5"
The animation duration time in seconds.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us