Convert Figma logo to code with AI

bokub logochalk-animation

:clapper: Colorful animations in terminal output

2,125
71
2,125
5

Top Related Projects

9,080

Elegant terminal spinner

8,911

Highly configurable logging utility

The tiniest and the fastest library for terminal output formatting with ANSI colors

1,609

The fastest Node.js library for formatting terminal text with ANSI colors~!

21,891

🖍 Terminal string styling done right

Quick Overview

The bokub/chalk-animation project is a Node.js library that provides a set of functions for creating animated text in the terminal using the popular chalk library. It allows developers to easily add eye-catching animations to their command-line applications.

Pros

  • Simplicity: The library provides a straightforward API with a small set of functions, making it easy to integrate into existing projects.
  • Customization: Users can customize the animation styles, colors, and timing to fit their specific needs.
  • Cross-platform: The library works across different operating systems, including Windows, macOS, and Linux.
  • Active Development: The project is actively maintained, with regular updates and bug fixes.

Cons

  • Limited Animation Types: The library currently offers a limited set of animation types, which may not be sufficient for more complex or specialized use cases.
  • Dependency on Chalk: The library is heavily dependent on the chalk library, which may be a concern for developers who prefer to use a different text-styling solution.
  • Performance Considerations: Depending on the complexity of the animations, the library may have a noticeable impact on the performance of the terminal application.
  • Lack of Comprehensive Documentation: While the project has some documentation, it may not be as detailed or comprehensive as some users would prefer.

Code Examples

Here are a few examples of how to use the bokub/chalk-animation library:

  1. Bouncing Text:
const chalkAnimation = require('chalk-animation');

const bounceText = chalkAnimation.bounce('Hello, World!');

setTimeout(() => {
  bounceText.stop();
}, 2000);

This code creates a bouncing animation for the text "Hello, World!" and stops the animation after 2 seconds.

  1. Glowing Text:
const chalkAnimation = require('chalk-animation');

const glowingText = chalkAnimation.glitch('Glowing Text');

setTimeout(() => {
  glowingText.stop();
}, 3000);

This code creates a glitching/glowing animation for the text "Glowing Text" and stops the animation after 3 seconds.

  1. Pulsing Text:
const chalkAnimation = require('chalk-animation');

const pulsingText = chalkAnimation.pulse('Pulsing Text', {
  color: 'green',
  speed: 2,
});

setTimeout(() => {
  pulsingText.stop();
}, 5000);

This code creates a pulsing animation for the text "Pulsing Text" in the color green, with a speed of 2, and stops the animation after 5 seconds.

Getting Started

To get started with the bokub/chalk-animation library, follow these steps:

  1. Install the library using npm or yarn:
npm install chalk-animation

or

yarn add chalk-animation
  1. Import the library in your JavaScript file:
const chalkAnimation = require('chalk-animation');
  1. Use one of the available animation functions, such as bounce(), glitch(), or pulse(), to create an animation:
const bounceText = chalkAnimation.bounce('Hello, World!');
  1. (Optional) Customize the animation by passing additional options to the function:
const pulsingText = chalkAnimation.pulse('Pulsing Text', {
  color: 'green',
  speed: 2,
});
  1. Stop the animation after a desired duration using the stop() method:
setTimeout(() => {
  bounceText.stop();
}, 2000);

That's it! You can now use the bokub/chalk-animation library to add eye-catching animations to your command-line applications.

Competitor Comparisons

9,080

Elegant terminal spinner

Pros of ora

  • More versatile with support for various spinner styles and customization options
  • Provides a cleaner API for creating and managing loading indicators
  • Actively maintained with frequent updates and a larger community

Cons of ora

  • Focused primarily on terminal spinners, lacking animation capabilities
  • May be overkill for simple loading indicator needs
  • Requires more setup for basic usage compared to chalk-animation

Code Comparison

chalk-animation:

const chalkAnimation = require('chalk-animation');
chalkAnimation.rainbow('Loading...').start();

ora:

const ora = require('ora');
const spinner = ora('Loading...').start();
// Later...
spinner.succeed('Done!');

Key Differences

  • chalk-animation specializes in text animations, while ora focuses on spinner-style loading indicators
  • ora offers more control over the loading process, including success/failure states
  • chalk-animation provides colorful and eye-catching animations out of the box
  • ora is better suited for applications requiring precise loading feedback
  • chalk-animation is ideal for adding visual flair to CLI applications

Both libraries serve different purposes and can be used together in projects requiring both animated text and loading spinners. The choice between them depends on the specific needs of your application and the type of visual feedback you want to provide to users.

8,911

Highly configurable logging utility

Pros of Signale

  • More comprehensive logging functionality with various log levels and types
  • Supports custom loggers and themes for greater flexibility
  • Includes features like timers and spinners for advanced console output

Cons of Signale

  • More complex setup and configuration compared to Chalk Animation
  • Larger package size due to additional features
  • May be overkill for simple animation or coloring tasks

Code Comparison

Chalk Animation:

const chalkAnimation = require('chalk-animation');
chalkAnimation.rainbow('Hello, animated world!');

Signale:

const { Signale } = require('signale');
const options = {
  types: {
    info: {
      badge: '📢',
      color: 'blue',
      label: 'Info'
    }
  }
};
const signale = new Signale(options);
signale.info('Hello, customized world!');

Summary

Chalk Animation focuses on creating animated text in the console, while Signale provides a more comprehensive logging solution with additional features. Chalk Animation is simpler to use for basic animation tasks, whereas Signale offers greater customization and advanced logging capabilities at the cost of increased complexity.

The tiniest and the fastest library for terminal output formatting with ANSI colors

Pros of picocolors

  • Lightweight and minimalistic, focusing solely on text coloring
  • Faster performance due to its simplicity
  • No dependencies, making it easier to integrate into projects

Cons of picocolors

  • Limited functionality compared to chalk-animation's animated text features
  • Lacks advanced styling options like gradients or complex color combinations
  • No built-in animation capabilities

Code Comparison

picocolors:

import pc from 'picocolors';

console.log(pc.red('Error!'));
console.log(pc.blue('Info'));
console.log(pc.green('Success'));

chalk-animation:

import chalkAnimation from 'chalk-animation';

chalkAnimation.rainbow('Animated Rainbow Text').start();
chalkAnimation.pulse('Pulsing Text').start();
chalkAnimation.glitch('Glitchy Text').start();

picocolors offers a straightforward approach to adding colors to console output, while chalk-animation provides more advanced features, including text animations. picocolors is ideal for projects requiring simple color formatting, whereas chalk-animation is better suited for creating eye-catching, animated console output. The choice between the two depends on the specific needs of the project and the desired level of visual complexity in the console output.

1,609

The fastest Node.js library for formatting terminal text with ANSI colors~!

Pros of kleur

  • Lightweight and fast, with no dependencies
  • Supports both CommonJS and ES modules
  • Offers a simple and intuitive API for chaining color methods

Cons of kleur

  • Lacks animation capabilities
  • Does not support 256 colors or TrueColor (24-bit)
  • Limited to basic text styling and coloring

Code Comparison

kleur:

import kleur from 'kleur';

console.log(kleur.red().bold().underline('Hello, world!'));

chalk-animation:

import chalkAnimation from 'chalk-animation';

chalkAnimation.rainbow('Hello, world!').start();

Summary

kleur is a lightweight and fast color library for Node.js, focusing on simplicity and performance. It's ideal for basic text styling and coloring in command-line applications. chalk-animation, on the other hand, offers more advanced features like text animations and a wider range of color options, but comes with a larger footprint and additional dependencies. The choice between the two depends on the specific requirements of your project, balancing between simplicity and feature richness.

21,891

🖍 Terminal string styling done right

Pros of Chalk

  • More comprehensive and widely used library for terminal string styling
  • Offers a broader range of color and style options
  • Actively maintained with frequent updates and improvements

Cons of Chalk

  • Lacks built-in animation capabilities
  • Requires additional setup for creating animated text effects
  • May be overkill for simple text coloring needs

Code Comparison

Chalk:

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'));
console.log(chalk.bold.rgb(10, 100, 200)('Hello!'));

Chalk-animation:

const chalkAnimation = require('chalk-animation');
chalkAnimation.rainbow('Hello world!');
chalkAnimation.pulse('Hello!');

Key Differences

  • Chalk focuses on static text styling, while Chalk-animation specializes in animated text effects
  • Chalk-animation provides ready-to-use animation functions, making it easier to create dynamic terminal output
  • Chalk offers more granular control over text styling, allowing for complex color and style combinations

Use Cases

  • Choose Chalk for comprehensive text styling in CLI applications or when fine-grained control is needed
  • Opt for Chalk-animation when creating eye-catching, animated terminal output is the primary goal

Community and Ecosystem

  • Chalk has a larger user base and more third-party integrations
  • Chalk-animation is more niche but offers unique functionality for specific use cases

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

chalk-animation

Build Status Version Codecov Downloads XO code style

Colorful animations in terminal output

Available animations

NamePreview
rainbowrainbow
pulsepulse
glitchglitch
radarradar
neonneon
karaokekaraoke

Install

$ npm i chalk-animation

Usage

import chalkAnimation from 'chalk-animation';

chalkAnimation.rainbow('Lorem ipsum dolor sit amet');

Start and stop

You can stop and resume an animation with stop() and start().

When created, the instance of chalkAnimation starts automatically.

const rainbow = chalkAnimation.rainbow('Lorem ipsum'); // Animation starts

setTimeout(() => {
    rainbow.stop(); // Animation stops
}, 1000);

setTimeout(() => {
    rainbow.start(); // Animation resumes
}, 2000);

Automatic stop

Anything printed to the console will stop the previous animation automatically

chalkAnimation.rainbow('Lorem ipsum');
setTimeout(() => {
    // Stop the 'Lorem ipsum' animation, then write on a new line.
    console.log('dolor sit amet');
}, 1000);

Changing speed

Change the animation speed using a second parameter. Should be greater than 0, default is 1.

chalkAnimation.rainbow('Lorem ipsum', 2); // Two times faster than default

Changing text

Change the animated text seamlessly with replace()

let str = 'Loading...';
const rainbow = chalkAnimation.rainbow(str);

// Add a new dot every second
setInterval(() => {
	rainbow.replace(str += '.');
}, 1000);

Manual rendering

Manually render frames with render(), or get the content of the next frame with frame()

const rainbow = chalkAnimation.rainbow('Lorem ipsum').stop(); // Don't start the animation

rainbow.render(); // Display the first frame

const frame = rainbow.frame(); // Get the second frame
console.log(frame);

CLI mode

# Install package globally
$ npm install --global chalk-animation
$ chalk-animation --help

  Colorful animations in terminal output

  Usage
    $ chalk-animation <name> [options] [text...]

  Options
    --duration  Duration of the animation in ms, defaults to Infinity
    --speed  Animation speed as number > 0, defaults to 1

  Available animations
    rainbow
    pulse
    glitch
    radar
    neon
    karaoke

  Example
    $ chalk-animation rainbow Hello world!

Related

License

MIT © Boris K

NPM DownloadsLast 30 Days