bokub/gradient-stringPublic

NotificationsYou must be signed in to change notification settings
Fork21
Star1.1k

🌈 Beautiful color gradients in terminal output

License

MIT license

1.1k stars 21 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
.github/workflows		.github/workflows
.husky		.husky
examples		examples
src		src
.gitignore		.gitignore
.nvmrc		.nvmrc
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

Repository files navigation

gradient-string

Beautiful color gradients in terminal output

Install

$ npm i gradient-string

Usage

importgradientfrom'gradient-string';console.log(gradient(['cyan','pink'])('Hello world!'));

Initialize a gradient

// Provide an array of colorsconstcoolGradient=gradient(['#FF0000','#00FF00','#0000FF']);

The colors are parsed with TinyColor,multiple formats are accepted.

constcoolGradient=gradient([tinycolor('#FFBB65'),// tinycolor object{r:0,g:255,b:0},// RGB object{h:240,s:1,v:1,a:1},// HSVa object'rgb(120, 120, 0)',// RGB CSS string'gold',// named color]);

Use a gradient

constcoolString=coolGradient('This is a fancy string!');console.log(coolString);

Built-in gradients

Usage

import{rainbow,pastel}from'gradient-string';// Use the pastel built-in gradientconsole.log(pastel('I love gradient-string!'));// Use the rainbow built-in gradientconsole.log(rainbow('It is so pretty! 🌈'));

Available built-in gradients

Multi line gradients

In some cases, you may want to apply the same horizontal gradient on each line of a long text (or a piece of ASCII art).

You can use themultiline() method of a gradient to ensure that the colors are vertically aligned.

importgradient,{rainbow}from'gradient-string';// Use the same gradient on every lineconstduck=gradient(['green','yellow']).multiline(`  __<(o )___ ( ._> /   ---`);console.log(duck);// Works with aliasesrainbow.multiline('Multi line\nstring');// Works with advanced options (read below)gradient(['cyan','pink'],{interpolation:'hsv'}).multiline('Multi line\nstring');

Advanced gradients

There are also more advanced options for gradient customization, such as custom color stops, or choice of color interpolation

Custom color stops

By default, the gradient color stops are distributed equidistantly.

You can specify the position of each color stop (between0 and1), using the following syntax:

letcoolGradient=gradient([{color:'#d8e0de',pos:0},{color:'#255B53',pos:0.8},{color:'#000000',pos:1},]);

Color interpolation

When creating a gradient, you can provide a second parameter to choose how the colors will be generated.

Here is the fullgradient API:

`gradient([colors], options?)(text)`

colors

Type:Array<Color>
Colors of the gradient.Multiple formats are accepted.

text

Type:String
String you want to color.

options

Type:Object(optional)

interpolation

Type:string
The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.interpolation can be set torgb for RGB interpolation, orhsv for HSV interpolation.
Defaults torgb. Case-insensitive

hsvSpin

Type:string
Used only in the case of HSV interpolation.
Because hue can be considered as a circle, there are two ways to go from a color to another color.
hsvSpin can be eithershort orlong, depending on if you want to take the shortest or the longest way between two colors.
Defaults toshort. Case-insensitive

Example

Code

conststr='■'.repeat(48);// Standard RGB gradientconststandardRGBGradient=gradient(['red','green']);// Short HSV gradient: red -> yellow -> greenconstshortHSVGradient=gradient(['red','green'],{interpolation:'hsv'});// Long HSV gradient: red -> magenta -> blue -> cyan -> greenconstlongHSVGradient=gradient(['red','green'],{interpolation:'hsv',hsvSpin:'long'});console.log(standardRGBGradient(str));console.log(shortHSVGradient(str));console.log(longHSVGradient(str));