Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
cmatrix
Advanced tools
Readme
Matrix animation effect in JavaScript using Canvas
npm install cmatrix
You can use CDN:
<script src="https://cdn.jsdelivr.net/npm/cmatrix"></script>
and intialize the effect.
matrix(canvasElement, {
chars: ['0', '1'],
font_size: 16
}).
matrix(canvasElement, {
chars: matrix.range(0x30A1, 0x30F6).concat(matrix.range(0x0030, 0x0039)),
font_size: 16
}).
The matrix function return a Promise that is resolved when exit.
By default, q
and ESC
exit from the effect. Use exit: false
to disable ending of the animation.
chars
- array of single character strings, by default Katagana and Hiragana (Japanese characters are used).exit
- by default matrix return a promise that resolves when it ends (when someone press q
or ESC
)
this option when set to false will disable this and the function return undefined.color
- default color - default is #0f0
.width
- width of the Canvas, default full screen.height
- height of the Canvas, default full screen.resize
- if the size is constant (you specify the width and height options) you should set it to false.background
- by default it's set rgba(0, 0, 0, 0.05)
alpha is required for the effect to look good.font_size
- number the default is 14.mount: (matrix) => void
- callback function which is executed with single argument that is instance of internal Matrix object when initializing.unmount: (matrix) => void
- callback function which is executed when Matrix effect is destroyed.font
- name of the font (default monospace
).start()
- start the animationstop()
- stop the animationresize(width, height)
- resize the canvas to the given width and heightclear()
- clear the canvasreset()
- reset the internal state the effectfullscreen()
- toggle fullscreenrender()
- render single frame using internal statematrix.range(start_number, end_number)
- returns characters created from given range. Use matrix.range(0x30A1, 0x30F6)
for Katagana characters and matrix.range(0x3041, 0x3096)
for Hiragana, they look nice as matrix rain.matrix.custom_chars
- array containing all characters for custom matrix font in this repository.width
, heigth
, resize
optionsmatrix.custom_chars
that contains all characters for for custom matrix font.fullscreen()
methodmount
and unmount
optionexit
/color
/background
optionsCopyright (C) 2021-2023 Jakub T. Jankiewicz
Released under MIT License
FAQs
Matrix effect animation on a canvas
The npm package cmatrix receives a total of 5 weekly downloads. As such, cmatrix popularity was classified as not popular.
We found that cmatrix demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.