Ngx-mdr NPM | npm.io

Matrix Digital Rain Effect for Angular

React Matrix Digital Rain Effect gives you your favorite Matrix movie screen effect in the form of a React component. The source originates from an October 2021 blog article written by Adam Nagy, "Matrix raining code effect using JavaScript".

Preview

alt text

Installation

Use the package manager npm to install .

npm i ngx-mdr -s

// in app.module.ts
import { NgxMdrModule } from 'ngx-mdr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgxMdrModule // import NgxMdrModule in here
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Optional 1:

// in app.component.html
<ngx-mdr [settings]="settings"></ngx-mdr>

// in app.component.ts
import { MartixRainingLetterSettings } from 'ngx-mdr/lib/setting.model';

export class AppComponent implements {
  settings: MartixRainingLetterSettings = {
    canvasWidth: window.innerWidth,
    canvasHeight: window.innerHeight
  } as MartixRainingLetterSettings;
  ...
}

Optional 2:

// in app.component.html
<canvas #canvas></canvas>

// in app.component.ts
import { RenderMatrix } from 'ngx-mdr';
import { MartixRainingLetterSettings } from 'ngx-mdr/lib/setting.model';
export class AppComponent implements, AfterViewInit {

  @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;

  settings: MartixRainingLetterSettings = {
    canvasWidth: window.innerWidth,
    canvasHeight: window.innerHeight
  } as MartixRainingLetterSettings;

  ngAfterViewInit(): void {
    // call RenderMatrix() to render
    RenderMatrix(this.canvas, this.settings);
  }
}

Settings

Parameter	Usage	Type
fontColor	the text color of the rain	string
backgroundColor	the background color of the canvas	string
canvasWidth	the width of the canvas	number
canvasHeight	the height of the canvas	number
alphabet	the text of the rain	string
fontSize	the text size of the rain	number