title: Colourful Text
description: A text component with various colours, filter and scale effects.
---

```vue
<template>
  <div class="relative flex h-screen w-full items-center justify-center overflow-hidden bg-black">
    <Motion
      as="img"
      src="https://assets.aceternity.com/linear-demo.webp"
      class="pointer-events-none absolute inset-0 size-full object-cover [mask-image:radial-gradient(circle,transparent,black_80%)]"
      :initial="{ opacity: 0 }"
      :while-in-view="{
        opacity: 0.5,
      }"
      :transition="{
        duration: 1,
      }"
    />
    <div>
      <h1
        class="z-2 relative text-center font-sans text-2xl font-bold text-white lg:text-7xl md:text-5xl"
      >
        The best <ColourfulText text="components" />
        <br />
        you will ever find
      </h1>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Motion } from "motion-v";
</script>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="colourful-text" />
```

## 手动安装

复制并粘贴以下代码：

```vue
<template>
  <motion.span
    v-for="(char, index) in props.text"
    :key="`${char}-${count}-${index}`"
    :initial="{
      y: 0,
      opacity: 0.2,
      color: props.startColor,
      scale: 1,
      filter: 'blur(5px)',
    }"
    :transition="{
      duration: props.duration,
      delay: index * 0.05,
    }"
    :animate="{
      y: [0, -3, 0],
      opacity: [1, 0.8, 1],
      scale: [1, 1.01, 1],
      filter: ['blur(0px)', 'blur(5px)', 'blur(0px)'],
      color: currentColors[index % currentColors.length],
    }"
    :exit="{
      y: -3,
      opacity: 1,
      scale: 1,
      filter: 'blur(5px)',
      color: props.startColor,
    }"
  >
    {{ char }}
  </motion.span>
</template>

<script setup lang="ts">
import { motion } from "motion-v";
import { ref, onMounted, onUnmounted } from "vue";

interface Props {
  text: string;
  colors?: string[];
  startColor?: string;
  duration?: number;
}

const props = withDefaults(defineProps<Props>(), {
  startColor: "rgb(255,255,255)",
  duration: 0.5,
  colors: () => [
    "rgb(131, 179, 32)",
    "rgb(47, 195, 106)",
    "rgb(42, 169, 210)",
    "rgb(4, 112, 202)",
    "rgb(107, 10, 255)",
    "rgb(183, 0, 218)",
    "rgb(218, 0, 171)",
    "rgb(230, 64, 92)",
    "rgb(232, 98, 63)",
    "rgb(249, 129, 47)",
  ],
});

const currentColors = ref(props.colors);
const count = ref(0);
const lastHidden = ref(0);

// eslint-disable-next-line no-undef
let intervalId: undefined | NodeJS.Timeout = undefined;
onMounted(() => {
  intervalId = setInterval(() => {
    const shuffled = [...props.colors].sort(() => 0.5 - Math.random());
    currentColors.value = shuffled;

    if (document.visibilityState === "visible") {
      if (Date.now() - lastHidden.value > 500) {
        count.value++;
      }
    } else {
      lastHidden.value = Date.now();
    }
  }, 5000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped></style>

```

## API

| Prop 名称    | 类型       | 默认值                                                                                                                                                                                                             | 描述                                                                                                                                                      |
| ------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`       | `string`   | `"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[]` | `[ "rgb(131, 179, 32)", "rgb(47, 195, 106)", "rgb(42, 169, 210)", "rgb(4, 112, 202)", "rgb(107, 10, 255)", "rgb(183, 0, 218)", "rgb(218, 0, 171)", "rgb(230, 64, 92)", "rgb(232, 98, 63)", "rgb(249, 129, 47)", ]` | The text use colors.                                                                                                                                      |
| `startColor` | `string`   | `"rgb(255,255,255)"`                                                                                                                                                                                               | The char start color.                                                                                                                                     |
| `duration`   | `number`   | `5`                                                                                                                                                                                                                | The animation duration time in seconds.                                                                                                                   |

## 感谢

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Ported from [Aceternity UI Colourful Text](https://ui.aceternity.com/components/colourful-text)