Typography & motion

GradientText

Five preset palettes — aurora, sunset, forest, flame, animated — rendered via background-clip:text. Polymorphic via the `as` prop.

GradientText background-clips a multi-stop gradient to its glyphs. Five presets (aurora, sunset, forest, flame, animated), polymorphic via as so the same component renders an <h1> or a <span>. The animated variant slow-drifts the gradient at 10s per loop — use sparingly, it draws the eye on purpose.

Live preview

aurora

sunset

forest

flame

animated

Example

tsx

import { GradientText } from '@kidcash/ui';

<GradientText as="h1" variant="aurora" className="text-5xl font-bold">
  Save together. Spend together.
</GradientText>

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use GradientText in your own app.

← Previous

Keyboard

AnimatedNumber