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.
Example
tsx
import { GradientText } from '@kidcash/ui';
<GradientText as="h1" variant="aurora" className="text-5xl font-bold">
Save together. Spend together.
</GradientText>Try it live
← Back to the playground to see GradientText rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.