{"id":22329500,"url":"https://github.com/jcubic/ascii-morph","last_synced_at":"2025-10-17T07:54:14.667Z","repository":{"id":262196949,"uuid":"868429754","full_name":"jcubic/ascii-morph","owner":"jcubic","description":"Library to animate between two ASCII image. A fork of @tholman","archived":false,"fork":false,"pushed_at":"2024-11-30T20:51:41.000Z","size":270,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-04T10:59:57.035Z","etag":null,"topics":["animation","ascii","ascii-art","isomorphic","isomorphic-javascript"],"latest_commit_sha":null,"homepage":"","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/jcubic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-06T11:17:38.000Z","updated_at":"2024-12-01T12:00:50.000Z","dependencies_parsed_at":"2024-11-11T06:06:18.167Z","dependency_job_id":null,"html_url":"https://github.com/jcubic/ascii-morph","commit_stats":null,"previous_names":["jcubic/ascii-morph"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fascii-morph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fascii-morph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fascii-morph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fascii-morph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcubic","download_url":"https://codeload.github.com/jcubic/ascii-morph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252941214,"owners_count":21828826,"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":["animation","ascii","ascii-art","isomorphic","isomorphic-javascript"],"created_at":"2024-12-04T04:01:04.466Z","updated_at":"2025-10-17T07:54:09.624Z","avatar_url":"https://github.com/jcubic.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":["Isomorphic"],"readme":"# ASCII Morph\n\n[![npm](https://img.shields.io/badge/npm-0.2.3-blue.svg)](https://www.npmjs.com/package/ascii-morph)\n[![License](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/license/MIT)\n\n[Ascii Morph](https://github.com/jcubic/ascii-morph) is a small stand alone javascript library for rendering ascii art and creations into elements, allowing for them to be changed out with a morphing transition.\n\n## Demo\nHere's a gif of it in action. You can also play with the [demo live here](https://codepen.io/jcubic/pen/dyxXdLE).\n\n![Ascii Morph in action](https://s3.amazonaws.com/tholman.com/static-assets/ascii-morph-demo.gif)\n\n## Usage\n\n### Installation\n\n```\nnpm install ascii-morph\n```\n\nThis is example usage. First you need two frames as array of lines:\n\n```javascript\nconst bird = [\n  \"                             /\",\n  \"                            /\",\n  \"                           /;\",\n  \"                          //\",\n  \"                         ;/\",\n  \"                       ,//\",\n  \"                   _,-' ;_,,\",\n  \"                _,'-_  ;|,'\",\n  \"            _,-'_,..--. |\",\n  \"    ___   .'-'_)'  ) _)\\\\|      ___\",\n  \"  ,'\\\"\\\"\\\"`'' _  )   ) _)  ''--'''_,-'\",\n  \"-={-o-  /|    )  _)  ) ; '_,--''\",\n  \"  \\\\ -' ,`.  ) .)  _)_,''|\",\n  \"   `.\\\"(   `------''     /\",\n  \"     `.\\\\             _,'\",\n  \"       `-.____....-\\\\\\\\\",\n  \"                 || \\\\\\\\\",\n  \"                 // ||\",\n  \"                //  ||\",\n  \"            _-.//_ _||_,\",\n  \"              ,'  ,-'/\"\n]\n\nconst mona = [\n  \"         ____\",\n  \"        o8%8888,\",\n  \"      o88%8888888.\",\n  \"     8'-    -:8888b\",\n  \"    8'         8888\",\n  \"   d8.-=. ,==-.:888b\",\n  \"   \u003e8 `~` :`~' d8888\",\n  \"   88         ,88888\",\n  \"   88b. `-~  ':88888\",\n  \"   888b ~==~ .:88888\",\n  \"   88888o--:':::8888\",\n  \"   `88888| :::' 8888b\",\n  \"   8888^^'       8888b\",\n  \"  d888           ,%888b.\",\n  \" d88%            %%%8--'-.\",\n  \"/88:.__ ,       _%-' ---  -\",\n  \"    '''::===..-'   =  --.  `\",\n];\n```\n\nThen you can create and animation between those two frames:\n\n```javascript\nimport AsciiMorph from 'ascii-morph';\n\nconst anim = AsciiMorph({ x: 50, y: 25 });\n\nconst frames = anim.morph(bird, mona);\n\nanim.animate(frames, function(frame) {\n  console.log('\\x1b[2J' + frame.join('\\n'));\n});\n```\n\n\u003e [!NOTE]\n\u003e `\\x1b[2J` ANSI Escape code will clear the terminal.\n\nWhen using in Browser you can use helper function that will update the DOM:\n\n```javascript\nconst render = anim.update(document.querySelector('pre'));\n\nanim.animate(frames, render);\n```\n\nYou can also use the animate and update the DOM yourself. You can also use frames directly.\n`frames` are an array of frames similar to the input ones.\n\n### AbortSignal\n\n`animate` function return a Promise and accept [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).\n\n```javascript\nanim.animate(frames, render, { signal: AbortSignal.timeout(5000) }).then(() =\u003e {\n  console.log('animation finished');\n}).catch(() =\u003e {\n  console.log('animation aborted');\n});\n```\n\n## License\n\nCopyright (c) 2024 Jakub T. Jankiewicz https://jcu.bi\u003cbr/\u003e\nCopyright (c) 2016 Tim Holman - http://tholman.com\n\n[The MIT License](https://github.com/jcubic/ascii-morph/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcubic%2Fascii-morph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcubic%2Fascii-morph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcubic%2Fascii-morph/lists"}