Colourful Text
NewText component with animated color-shifting characters.
Preview
Colourful Text
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Headlines and key phrases that need visual emphasis.
Why this component matters
Color shifts draw the eye to specific words, creating emphasis without layout changes.
Usage guidance
Apply to 1-3 key words in a headline, not entire paragraphs. Use IO purple palette for the color range.
Installation
bash
npx shadcn@latest add @aceternity/colourful-textUsage
example.tsxtsx
import { ColourfulText } from "@/components/ui/colourful-text";
export default function Example() {
return (
<ColourfulText>
{/* Your content here */}
</ColourfulText>
);
}Source
colourful-text.tsx
components/ui/colourful-text.tsx