REACT-TEXT-GRADIENT

Create awesome static or animated text gradients in React

yarn add @carefully-coded/react-text-gradient
NPM PACKAGE
BY TOM @
INSTALL
STATIC GRADIENT
ANIMATED GRADIENT
#

INSTALL

React-text-gradient works as a simple react component, taking in gradient props and working on the given children. Making any text inside of it a gradient.
yarn
npm
1yarn add @carefully-coded/react-text-gradient
#

STATIC GRADIENT

RADIAL GRADIENT

By default gradients are radial and effectively start at the bottom left and finish at the top right of the text (we think this usually looks the best) - but you can use a linear gradient too.
SAVE THE WORLD, ONE GRADIENT AT A TIME
Hide code
javascript
typescript
1import FancyText from '@carefully-coded/react-text-gradient';
2
3export default function StaticTitle() {
4  return (
5    <FancyText gradient={{ from: '#818CF8', to: '#5B21B6' }}>
6      SAVE THE WORLD, ONE GRADIENT AT A TIME
7    </FancyText>
8  )
9}

LINEAR GRADIENT

A linear gradient can be used instead of a radial one by specifying the
type
on the gradient prop, it takes two possible values -
linear
or
radial
SAVE THE WORLD, ONE GRADIENT AT A TIME
Hide code
javascript
typescript
1import FancyText from '@carefully-coded/react-text-gradient';
2
3export default function StaticTitle() {
4  return (
5    <FancyText
6      gradient={{ from: '#818CF8', to: '#5B21B6', type: 'linear' }}
7    >
8      SAVE THE WORLD, ONE GRADIENT AT A TIME
9    </FancyText>
10  )
11}
#

ANIMATED GRADIENT

Provide the
animate
flag to add an animation. Radial gradients (the default) will spin the gradient around the text.
RADIAL ANIMATED GRADIENT
Hide code
javascript
typescript
1import FancyText from '@carefully-coded/react-text-gradient';
2              
3export default function AnimatedRadial() {
4  return (
5    <FancyText
6      gradient={{ from: 'rgb(59 238 221)', to: 'rgb(33 148 182)' }}
7      animate
8      animateDuration={1000}
9    >
10      RADIAL ANIMATED GRADIENT
11    </FancyText>
12  )
13}

LINEAR ANIMATED GRADIENT

Linear gradient animations transition between the
from
and
to
parameters when the
animate
flag is set.
LINEAR ANIMATED GRADIENT
Hide code
javascript
typescript
1import FancyText from '@carefully-coded/react-text-gradient';
2              
3export default function LinearAnimated() {
4  return (
5    <FancyText
6      gradient={{ from: '#F858E0', to: '#77156C', type: 'linear' }}
7      animate
8      animateDuration={1000}
9    >
10      LINEAR ANIMATED GRADIENT
11    </FancyText>
12  )
13}

COLOR TRANSITION GRADIENT

Use
animateTo
to animate to a different gradient entirely - just give it a new gradient definition, i.e provide new
from
and
to
attributes.
CUSTOM COLOR ANIMATED GRADIENT
Hide code
javascript
typescript
1import FancyText from '@carefully-coded/react-text-gradient';
2              
3export default function ColorAnimated() {
4  return (
5    <FancyText
6      gradient={{ from: '#F858E0', to: '#77156C', type: 'linear' }}
7      animateTo={{ from: '#6DEDD0', to: '#7AE23A' }}
8      animateDuration={2000}
9    >
10      CUSTOM COLOR ANIMATED GRADIENT
11    </FancyText>
12  )
13}