Gradient Text

Pro

Text filled with a multi-stop gradient that flows through the letters on a loop.

Made to be played

Customize

Cycle6s

First color#ff784f

Second color#ffc24a

Third color#ffa585

Installation

Gradient Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy gradient-text.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { GradientText } from "@/components/ui/gradient-text";

<h1 className="text-7xl font-black uppercase">
  <GradientText text="Made to be played" colors={["#ff784f", "#ffc24a", "#ffa585"]} />
</h1>

Props

4 properties

Property	Type	Default	Description
text	string	—	The text to fill.
colors	string[]	["#ff784f", "#ffc24a", "#ffa585"]	Gradient stops, in order. The loop is seamless.
speed	number	6	Seconds for the gradient to travel one full cycle.
className	string	—	Extra classes for the text.

Dependencies: motion