The famous Matrix rain effect of falling green characters in a terminal

Related tags

Effect matrix-rain
Overview

Matrix Rain

The famous Matrix rain effect of falling green characters in a terminal with node.

Installation

npm install -g matrix-rain

Usage

usage: matrix-rain [-h] [-v] [-d {h,v}]
                [-c {green,red,blue,yellow,magenta,cyan,white}]
                [-k {ascii,binary,braille,emoji,katakana}] [-f FILEPATH]


The famous Matrix rain effect of falling green characters as a cli command

Optional arguments:
  -h, --help            Show this help message and exit.
  -d, --direction {h,v}
                        Change direction of rain. h=horizontal, v=vertical
  -c , --color {green,red,blue,yellow,magenta,cyan,white}
                        Rain color. NOTE: droplet start is always white
  -k, --char-range {ascii,binary,braille,emoji,katakana}
                        Use rain characters from char-range
  -f, --file-path FILEPATH
                        Read characters from a file instead of random
                        characters from char-range

Screenshots

Vertical Matrix

Horizontal Matrix

Story Time

On 2016 christmas eve, I watched the The Matrix (1999) and was inspired by the matrix rain effect. I was curious to see if I could replicate this effect in nodejs.

There's blessed and node-ncurses which would have helped but rather than using the library I wanted to learn how console cursor manipulation works behind the scenes. I browsed through the source code of colors.js and got a few pointers. On that day I discovered terminal escape codes VT100 ANSI codes table. There is also the comprehensive xterm control sequences documentation ctlseqs.

Node's process.stdout has a columns and rows property. It also fires resize events like the browser. With escape codes I can treat the terminal as a canvas and paint on it. I discovered a new medium to show my art.

In general its very possible to build interactive terminal apps with great UX that are lightweight and blazing fast. I'm on that journey.

Comments
  • incorrect hash bang path

    incorrect hash bang path

    ➜  ~  npm install -g matrix-rain
    /Users/Nicholas/.nvm/versions/node/v4.2.2/bin/matrix-rain -> /Users/Nicholas/.nvm/versions/node/v4.2.2/lib/node_modules/matrix-rain/matrixRain
    [email protected] /Users/Nicholas/.nvm/versions/node/v4.2.2/lib/node_modules/matrix-rain
    ➜  ~  src
    ➜  ~  matrix-rain
    zsh: /Users/Nicholas/.nvm/versions/node/v4.2.2/bin/matrix-rain: bad interpreter: /usr/local/bin/node: no such file or directory
    

    looks like main/bin in your package.json is messed up

    opened by nickdesaulniers 3
  • Bump lodash from 4.17.11 to 4.17.19

    Bump lodash from 4.17.11 to 4.17.19

    Bumps lodash from 4.17.11 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump acorn from 6.0.4 to 6.4.1

    Bump acorn from 6.0.4 to 6.4.1

    Bumps acorn from 6.0.4 to 6.4.1.

    Commits
    • 9a2e9b6 Mark version 6.4.1
    • 90a9548 More rigorously check surrogate pairs in regexp validator
    • df0cf1a Mark version 6.4.0
    • 5303412 Also export Parser via Parser.acorn
    • efe273e give token types and etc to plugins
    • ac6decb Mark version 6.3.0
    • 7e9817d Allow sourceType: module even with ecmaVersion < 6
    • e2b8cc0 Fix broken parsing of new expressions when allowReserved=="never"
    • 1555c52 Update acorn.d.ts
    • 77c20fa Mark version 6.2.1
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash from 4.17.11 to 4.17.15

    Bump lodash from 4.17.11 to 4.17.15

    Bumps lodash from 4.17.11 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump eslint-utils from 1.3.1 to 1.4.3

    Bump eslint-utils from 1.3.1 to 1.4.3

    Bumps eslint-utils from 1.3.1 to 1.4.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump js-yaml from 3.12.0 to 3.13.1

    Bump js-yaml from 3.12.0 to 3.13.1

    Bumps js-yaml from 3.12.0 to 3.13.1.

    Changelog

    Sourced from js-yaml's changelog.

    3.13.1 / 2019-04-05

    • Fix possible code execution in (already unsafe) .load(), #480.

    3.13.0 / 2019-03-20

    • Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

    3.12.2 / 2019-02-26

    • Fix noArrayIndent option for root level, #468.

    3.12.1 / 2019-01-05

    • Added noArrayIndent option, #432.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • kanji/katakana ranges

    kanji/katakana ranges

    https://github.com/nojvek/matrix-rain/blob/19869bab031f04d76a1a129c219323543af6775d/index.js#L101

    btw, it is 'katakana' range (https://en.wikipedia.org/wiki/Katakana_(Unicode_block))

    U+30F6 - U+30FF is a dangerous range. I am not sure but sometimes I see that symbols once I increase window size

    opened by DyckGerman 1
  • Add image filter

    Add image filter

    Add the ability to apply a filter to the rain so that the rain effect is shown with the shape of the provided image.

    This does come at a cost: the required dependencies include canvas, which could lead to install failures if node-gyp doesn't find a pre-built binary for it. Anyway it looks cool to me, so I thought to share it :)

    matrix-sample

    As a side effect, I also bumped the version of argparse to 2.0, which has some small differences in the api w.r.t. v1.x, so don't be surprised to see a couple of changes there too.

    opened by OmbraDiFenice 0
  • change incorrect reference from 'kanji' to 'katakana'

    change incorrect reference from 'kanji' to 'katakana'

    The characters that currently show up when a user elects to use the kanji option are not actually kanji (the Chinese characters used in the Japanese writing system), but rather katakana (one of the Japanese phonetic alphabets).

    ("Kangxi" radicals are in the unicode spec from 0x2F00-0x2FDF)

    opened by foggy1 0
  • Wrong cursor position after exiting

    Wrong cursor position after exiting

    Thanks for the terrific work :P Really had fun with it

    One thing I'm noticed: every time I exit the process, the cursor is always at the very top of the console.

    Test

    I would have to hit enter multiple times to bring my cursor back to the original position to start typing again. I think this is related to how renderFrame works? Maybe we need to save the cursor position at the start and restore it with cursorTo before exit?

    I'd be willing to fix this myself, just in a few days :D

    Update. For some reason I can't reproduce in my console. I'm on MacOS and the above demo uses the VS Code terminal, but when I use the system's native terminal the cursor behaves correctly, so still investigating

    opened by Josh-Cena 1
  • Background color config

    Background color config

    Really happy about the introduced font color option.

    It looks like my zsh theme (or something else) makes the background gray, but i want black. Could you please add background color option and use it to clear screen before frame rendering? https://github.com/nojvek/matrix-rain/blob/fa85e943cffe8ca2c9cc1e5b8a95aea88f88b7c6/ansi.js#L4 image

    opened by DyckGerman 4
Owner
Noj Vek
πŸΆπŸ’»πŸŽ‰πŸŽŠπŸ”₯
Noj Vek
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

CodyHouse 50 Oct 28, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

lindelof 92 Dec 17, 2022
Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl

Yuri Artiukh 246 Dec 27, 2022
:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects ?? Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

null 19 Sep 25, 2022
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Halo Lab 35 Nov 30, 2022
πŸ‘“ Parallax tilt hover effect for React JS - tilt.js

React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U

Jon 340 Dec 23, 2022
Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

Rian Ariona 333 Jan 4, 2023
Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Ciaran Walsh 1.8k Dec 21, 2022
Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Mark Rolich 808 Dec 18, 2022