# M colorful text 3

> Cycling phrases — button replays the colour animation across multiple phrases

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/m-colorful-text-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/m-colorful-text-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/m-colorful-text-3-light-3b05e4dc5a303928.png
- Registry item: https://ui.cnippet.dev/r/m-colorful-text-3.json
- Categories: colorful text
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/m-colorful-text-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/colorful-text`

## Files

### `registry/default/motion-variants/m-colorful-text-3.tsx`

```tsx
//biome-ignore-all lint/style/noNonNullAssertion:<>

"use client";

import { useState } from "react";
import { ColorfulText } from "@/registry/default/motion/colorful-text";

const phrases = [
  "Animate with purpose",
  "Ship motion fast",
  "Copy. Paste. Done.",
];

export default function ColorfulTextCycle() {
  const [index, setIndex] = useState(0);
  const [trigger, setTrigger] = useState(true);

  const next = () => {
    setTrigger(false);
    setTimeout(() => {
      setIndex((i) => (i + 1) % phrases.length);
      setTrigger(true);
    }, 50);
  };

  return (
    <div className="flex min-h-50 flex-col items-center justify-center gap-6 px-6">
      <div className="flex h-16 items-center justify-center">
        <ColorfulText
          as="h2"
          className="text-center font-bold text-2xl sm:text-3xl"
          key={index}
          staggerDuration={0.035}
          trigger={trigger}
        >
          {phrases[index]!}
        </ColorfulText>
      </div>
      <button
        className="rounded-full bg-foreground px-5 py-2 font-medium text-background text-sm hover:bg-foreground/80"
        onClick={next}
        type="button"
      >
        Next phrase →
      </button>
    </div>
  );
}
```