{"id":26611108,"url":"https://github.com/ztf666/canvatrix","last_synced_at":"2026-04-25T16:34:29.257Z","repository":{"id":57193852,"uuid":"274527099","full_name":"ZTF666/CanvaTrix","owner":"ZTF666","description":"Turn your \u003ccanvas\u003e into a fancy Matrix like screen.","archived":false,"fork":false,"pushed_at":"2020-08-15T23:41:12.000Z","size":15396,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-26T19:22:31.920Z","etag":null,"topics":["canvas2d","matrix","matrix-library","npm-package","npm-script"],"latest_commit_sha":null,"homepage":"https://canvatrix.web.app","language":"JavaScript","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/ZTF666.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}},"created_at":"2020-06-23T23:10:10.000Z","updated_at":"2020-08-15T23:41:14.000Z","dependencies_parsed_at":"2022-09-15T22:20:45.932Z","dependency_job_id":null,"html_url":"https://github.com/ZTF666/CanvaTrix","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZTF666%2FCanvaTrix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZTF666%2FCanvaTrix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZTF666%2FCanvaTrix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZTF666%2FCanvaTrix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZTF666","download_url":"https://codeload.github.com/ZTF666/CanvaTrix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245197147,"owners_count":20576131,"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":["canvas2d","matrix","matrix-library","npm-package","npm-script"],"created_at":"2025-03-24T02:25:33.469Z","updated_at":"2026-04-25T16:34:29.209Z","avatar_url":"https://github.com/ZTF666.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CanvaTrix\n\n\u003cdiv align=\"center\"\u003e\n  \n[![HitCount](http://hits.dwyl.com/ZTF666/CanvaTrix.svg)](http://hits.dwyl.com/ZTF666/CanvaTrix)\n  \n\u003cp\u003eTurn your \u003cstrong\u003e\u003c\u003c/strong\u003ecanvas\u003cstrong\u003e\u003e\u003c/strong\u003e into a fancy Matrix like screen.\u003c/p\u003e\n\u003cp\u003eThis is  a readaptation/tweaked version made to be used more efficiently \u003c/p\u003e\n\u003cp\u003eThe original code can be found here :\u003c/p\u003e\n\u003cbr\u003e\n\n👉 [Original Code](http://cssdeck.com/labs/the-matrix) 👈\n\n\u003cbr\u003e\n\n\u003cimg src=\"/scrsh/x.gif\"\u003e\n\n\u003c/div\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003cp\u003eThis was made using : \u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F9%2F99%2FUnofficial_JavaScript_logo_2.svg%2F1200px-Unofficial_JavaScript_logo_2.svg.png\u0026f=1\u0026nofb=1\"  width='70' height='90'  alt=\"JS\"\u003e\n\u003cimg src=\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.rawgit.com%2Ffeross%2Fstandard%2Fmaster%2Fdocs%2Flogos%2Fnpm.png\u0026f=1\u0026nofb=1\" width='120' height='60'  alt=\"JS\"\u003e\n\n\u003c/div\u003e\n\n# NPM INSTALL\n\n```bash\n\n$ npm i canvatrix\n\n```\n\n## Usage\n\n```javascript\nimport { ZTF } from \"canvatrix/canvatrix\";\n\nZTF(YOUR_CANVAS_ID).matrix(SPEED, CANVAS_WIDTH, CANVAS_HEIGHT);\n```\n\n## Notice\n\n\u003cp\u003eMake sure your canvas width and height values are the same as the ones put in the call of the function \u003c/p\u003e\n\u003cp\u003eExample\u003c/p\u003e\n\n```html\n\u003ccanvas id=\"test\" width=\"1000\" height=\"50\"\u003e\u003c/canvas\u003e\n```\n\n```javascript\nZTF(YOUR_CANVAS_ID).matrix(SPEED, CANVAS_WIDTH, CANVAS_HEIGHT);\n```\n\n# NOT USING NPM ? NO PROBLEM !\n\n\u003cp\u003eDownload the file : script.js and include it in your html \u003c/p\u003e\n\n```html\n\u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  ZTF(YOUR_CANVAS_ID).matrix(SPEED, CANVAS_WIDTH, CANVAS_HEIGHT);\n\u003c/script\u003e\n```\n\n# Contact\n\n```\nyou can contact me at ZTF666@protonmail.ch or via my portfolio\n\n```\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ztfportfolio.web.app/\" target='_blank'\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/32502988?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eZTF666\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c/div\u003e\n\n## License\n\n\u003cdiv align=\"center\"\u003e\n\n**👨‍💻 CanvaTrix 👨‍💻** released under the [MIT](LICENSE) License.\n\u003cbr\u003e\u003cbr\u003e\n\n\u003cstrong\u003e\u003cp\u003eMade with 🖤 by ZTF666 - N.EA | 2020 \u003c/p\u003e \u003c/strong\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fztf666%2Fcanvatrix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fztf666%2Fcanvatrix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fztf666%2Fcanvatrix/lists"}