Gradient Text

Text with animated gradient color effect.

textgradientanimated

Installation

Terminalbash
npx motioncraft add gradient-text

Usage

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

<GradientText>Beautiful Gradient</GradientText>

Props

PropTypeDefaultDescription
children*ReactNode—Text content
classNamestring—Additional CSS classes

Related Components

Split Screen Text

New

Text that splits apart vertically on scroll, revealing content underneath. Scroll-driven with sticky positioning.

Text Generate

Text that generates character by character with a typing cursor effect.

Text Reveal

Text that reveals word by word with scroll-driven animation.

Aurora Background

Animated aurora borealis gradient background with configurable colors and speed.