{"id":13396693,"url":"https://github.com/bokub/gradient-string","last_synced_at":"2025-05-14T14:08:25.924Z","repository":{"id":37550314,"uuid":"97616950","full_name":"bokub/gradient-string","owner":"bokub","description":":rainbow:  Beautiful color gradients in terminal output","archived":false,"fork":false,"pushed_at":"2024-10-12T08:36:03.000Z","size":758,"stargazers_count":1128,"open_issues_count":3,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-28T13:59:00.774Z","etag":null,"topics":["color","console","gradient","nodejs","terminal"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bokub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-18T15:46:47.000Z","updated_at":"2025-04-27T01:21:57.000Z","dependencies_parsed_at":"2024-12-10T12:02:49.275Z","dependency_job_id":"a63b0133-3c71-4561-8d88-c5358c7502b8","html_url":"https://github.com/bokub/gradient-string","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":0.02564102564102566,"last_synced_commit":"7f49bdd2289af0df6d1a28fe449579119ff800fc"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Fgradient-string","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Fgradient-string/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Fgradient-string/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokub%2Fgradient-string/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bokub","download_url":"https://codeload.github.com/bokub/gradient-string/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254159783,"owners_count":22024564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","console","gradient","nodejs","terminal"],"created_at":"2024-07-30T18:01:00.285Z","updated_at":"2025-05-14T14:08:25.872Z","avatar_url":"https://github.com/bokub.png","language":"TypeScript","readme":"# gradient-string\n\n[![Build Status][build-src]][build-href]\n[![Version][version-src]][version-href]\n[![Codecov][codecov-src]][codecov-href]\n[![Downloads][downloads-src]][downloads-href]\n[![code style: prettier][code-style-src]][code-style-href]\n[![Mentioned in Awesome Node.js][awesome-src]][awesome-href]\n\n\u003e Beautiful color gradients in terminal output\n\n[![gradient-string](http://bit.ly/gradient-string-preview)](http://bit.ly/gradient-string-large)\n\n## Install\n\n```\n$ npm i gradient-string\n```\n\n## Usage\n\n```javascript\nimport gradient from 'gradient-string';\n\nconsole.log(gradient(['cyan', 'pink'])('Hello world!'));\n```\n\n### Initialize a gradient\n\n```javascript\n// Provide an array of colors\nconst coolGradient = gradient(['#FF0000', '#00FF00', '#0000FF']);\n```\n\nThe colors are parsed with TinyColor, [multiple formats are accepted](https://github.com/bgrins/TinyColor/blob/master/README.md#accepted-string-input).\n\n```javascript\nconst coolGradient = gradient([\n  tinycolor('#FFBB65'), // tinycolor object\n  { r: 0, g: 255, b: 0 }, // RGB object\n  { h: 240, s: 1, v: 1, a: 1 }, // HSVa object\n  'rgb(120, 120, 0)', // RGB CSS string\n  'gold', // named color\n]);\n```\n\n### Use a gradient\n\n```javascript\nconst coolString = coolGradient('This is a fancy string!');\nconsole.log(coolString);\n```\n\n## Built-in gradients\n\n### Usage\n\n```javascript\nimport { rainbow, pastel } from 'gradient-string';\n\n// Use the pastel built-in gradient\nconsole.log(pastel('I love gradient-string!'));\n\n// Use the rainbow built-in gradient\nconsole.log(rainbow('It is so pretty! 🌈'));\n```\n\n### Available built-in gradients\n\n[![Built-in gradients](http://bit.ly/2uFygrL)](http://bit.ly/2ufX07r)\n\n## Multi line gradients\n\nIn some cases, you may want to apply the same horizontal gradient on each line of a long text (or a piece of ASCII art).\n\nYou can use the `multiline()` method of a gradient to ensure that the colors are vertically aligned.\n\n```javascript\nimport gradient, { rainbow } from 'gradient-string';\n\n// Use the same gradient on every line\nconst duck = gradient(['green', 'yellow']).multiline(`\n  __\n\u003c(o )___\n ( ._\u003e /\n   ---\n`);\nconsole.log(duck);\n\n// Works with aliases\nrainbow.multiline('Multi line\\nstring');\n\n// Works with advanced options (read below)\ngradient(['cyan', 'pink'], { interpolation: 'hsv' }).multiline('Multi line\\nstring');\n```\n\n## Advanced gradients\n\nThere are also more advanced options for gradient customization, such as custom color stops, or choice of color interpolation\n\n### Custom color stops\n\nBy default, the gradient color stops are distributed equidistantly.\n\nYou can specify the position of each color stop (between `0` and `1`), using the following syntax:\n\n```javascript\nlet coolGradient = gradient([\n  { color: '#d8e0de', pos: 0 },\n  { color: '#255B53', pos: 0.8 },\n  { color: '#000000', pos: 1 },\n]);\n```\n\n### Color interpolation\n\nWhen creating a gradient, you can provide a second parameter to choose how the colors will be generated.\n\nHere is the full `gradient` API:\n\n#### `gradient([colors], options?)(text)`\n\n##### colors\n\nType: `Array\u003cColor\u003e`\u003cbr\u003e\nColors of the gradient. [Multiple formats are accepted](https://github.com/bgrins/TinyColor/blob/master/README.md#accepted-string-input).\n\n##### text\n\nType: `String`\u003cbr\u003e\nString you want to color.\n\n##### options\n\nType: `Object` _(optional)_\u003cbr\u003e\n\n###### interpolation\n\nType: `string`\u003cbr\u003e\nThe gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.\n`interpolation` can be set to `rgb` for RGB interpolation, or`hsv` for HSV interpolation.\u003cbr\u003e\nDefaults to `rgb`. Case-insensitive\n\n###### hsvSpin\n\nType: `string`\u003cbr\u003e\nUsed only in the case of HSV interpolation.\u003cbr\u003e\nBecause hue can be considered as a circle, there are two ways to go from a color to another color.\u003cbr\u003e\n`hsvSpin` can be either `short` or `long`, depending on if you want to take the shortest or the longest way between two colors.\u003cbr\u003e\nDefaults to `short`. Case-insensitive\n\n#### Example\n\n##### Code\n\n```javascript\nconst str = '■'.repeat(48);\n\n// Standard RGB gradient\nconst standardRGBGradient = gradient(['red', 'green']);\n\n// Short HSV gradient: red -\u003e yellow -\u003e green\nconst shortHSVGradient = gradient(['red', 'green'], { interpolation: 'hsv' });\n\n// Long HSV gradient: red -\u003e magenta -\u003e blue -\u003e cyan -\u003e green\nconst longHSVGradient = gradient(['red', 'green'], { interpolation: 'hsv', hsvSpin: 'long' });\n\nconsole.log(standardRGBGradient(str));\nconsole.log(shortHSVGradient(str));\nconsole.log(longHSVGradient(str));\n```\n\n##### Result\n\n![Example result](http://i.imgur.com/plQAN2Q.png)\n\n## Dependencies\n\n- [chalk](https://github.com/chalk/chalk) - Output colored text to terminal\n- [tinygradient](https://github.com/mistic100/tinygradient) - Generate gradients\n\n## Who uses gradient-string?\n\n- [Shopify](https://shopify.com/) in [Shopify CLI](https://www.npmjs.com/package/@shopify/cli-kit?activeTab=dependencies#:~:text=gradient%2Dstring)\n- [Turoborepo](https://turbo.build/) in [@turbo/workspaces](https://www.npmjs.com/package/@turbo/workspaces?activeTab=dependencies#:~:text=gradient%2Dstring) and [@turbo/codemod](https://www.npmjs.com/package/@turbo/codemod?activeTab=dependencies#:~:text=gradient%2Dstring)\n- [Tencent](https://www.tencent.com/) in [CloudBase Framework](https://www.npmjs.com/package/@cloudbase/framework-core?activeTab=dependencies#:~:text=gradient%2Dstring)\n- [Microsoft](https://microsoft.com) in [@lage-run/reporters](https://www.npmjs.com/package/@lage-run/reporters?activeTab=dependencies#:~:text=gradient%2Dstring)\n- [Fireship](https://fireship.io/) in [this YouTube video](https://youtu.be/_oHByo8tiEY?si=-G6EOqca31UYlWqr\u0026t=341), where he shows how he built [javascript-millionaire](https://github.com/fireship-io/javascript-millionaire)\n- [Magic UI](https://magicui.design/) in [Magic UI CLI](https://www.npmjs.com/package/magicui-cli?activeTab=dependencies#:~:text=gradient%2Dstring)\n- [Myself](https://github.com/bokub) in [chalk-animation](https://github.com/bokub/chalk-animation), the animated version of gradient-string\n- [Sindre Sorhus](https://github.com/sindresorhus) in [ink-gradient](https://www.npmjs.com/package/ink-gradient?activeTab=dependencies#:~:text=gradient%2Dstring), the [Ink](https://github.com/vadimdemedes/ink) version of gradient-string\n- [And ![many](https://flat.badgen.net/github/dependents-repo/bokub/gradient-string?color=000\u0026label=) more in open-source projects](https://github.com/bokub/gradient-string/network/dependents), who downloaded gradient-string [more than ![many](https://flat.badgen.net/npm/dt/gradient-string?color=000\u0026label=) times][downloads-href]!\n\n## License\n\nMIT © [Boris K](https://github.com/bokub)\n\n[build-src]: https://flat.badgen.net/github/checks/bokub/gradient-string?label=tests\n[version-src]: https://gradgen.bokub.workers.dev/npm/v/gradient-string?gradient=b65cff,11cbfa\u0026style=flat\u0026label=version\n[codecov-src]: https://img.shields.io/codecov/c/github/bokub/rgb-light-card?style=flat-square\n[downloads-src]: https://flat.badgen.net/npm/dw/gradient-string?color=FF9800\n[code-style-src]: https://flat.badgen.net/badge/code%20style/prettier/ff69b4\n[awesome-src]: https://awesome.re/mentioned-badge-flat.svg\n[build-href]: https://github.com/bokub/gradient-string/actions/workflows/run.yml\n[version-href]: https://www.npmjs.com/package/gradient-string\n[codecov-href]: https://codecov.io/gh/bokub/gradient-string\n[downloads-href]: https://www.npmjs.com/package/gradient-string\n[code-style-href]: https://github.com/bokub/prettier-config\n[awesome-href]: https://github.com/sindresorhus/awesome-nodejs\n","funding_links":[],"categories":["打印","Packages","JavaScript","TypeScript","Repository","包","目录","Command-line utilities","Colorize"],"sub_categories":["Command-line utilities","Command-line Utilities","命令行工具","Node","命令行实用工具"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokub%2Fgradient-string","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbokub%2Fgradient-string","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokub%2Fgradient-string/lists"}