{"id":23999011,"url":"https://github.com/a-bentofreire/beamtoix","last_synced_at":"2025-08-19T15:09:40.173Z","repository":{"id":57171921,"uuid":"135232068","full_name":"a-bentofreire/beamtoix","owner":"a-bentofreire","description":"frame-by-frame Web Animation framework","archived":false,"fork":false,"pushed_at":"2025-01-15T14:54:09.000Z","size":4648,"stargazers_count":52,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-03T05:18:05.491Z","etag":null,"topics":["animation","charts","cloud","css-animations","editing","gif","puppeteer","rendering","typescript","video"],"latest_commit_sha":null,"homepage":"https://www.devtoix.com/en/projects/beamtoix","language":"TypeScript","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/a-bentofreire.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"abentofreire","thanks_dev":null,"custom":null}},"created_at":"2018-05-29T02:37:11.000Z","updated_at":"2025-02-26T22:16:33.000Z","dependencies_parsed_at":"2024-12-06T20:11:42.396Z","dependency_job_id":"88f09c9a-72dc-4028-8071-7938af8b89bb","html_url":"https://github.com/a-bentofreire/beamtoix","commit_stats":{"total_commits":297,"total_committers":3,"mean_commits":99.0,"dds":0.03367003367003363,"last_synced_commit":"00f85cba66e0ada1083264232699fc64e3f9d9c1"},"previous_names":["a-bentofreire/beamtoix","a-bentofreire/abeamer"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/a-bentofreire/beamtoix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-bentofreire%2Fbeamtoix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-bentofreire%2Fbeamtoix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-bentofreire%2Fbeamtoix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-bentofreire%2Fbeamtoix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-bentofreire","download_url":"https://codeload.github.com/a-bentofreire/beamtoix/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-bentofreire%2Fbeamtoix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270643303,"owners_count":24621327,"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","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","charts","cloud","css-animations","editing","gif","puppeteer","rendering","typescript","video"],"created_at":"2025-01-07T23:09:43.270Z","updated_at":"2025-08-19T15:09:40.131Z","avatar_url":"https://github.com/a-bentofreire.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/abentofreire","https://www.paypal.com/donate/?business=MCZDHYSK6TCKJ\u0026no_recurring=0\u0026item_name=Support+Open+Source\u0026currency_code=EUR"],"categories":[],"sub_categories":[],"readme":"# Description\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-beamtoix.gif)\n\n![NPM Version](https://img.shields.io/npm/v/beamtoix)\n\n[BeamToIX](https://www.devtoix.com/en/projects/beamtoix) is a powerful frame-by-frame animation ecosystem, designed to create an animated story\nin the web browser and generate the file images of each frame in either a local machine or in the cloud.\n  \nThis project was formerly known as ABeamer. Read [here](#migrating-from-abeamer) how to migrate from ABeamer to BeamToIX.\n\nUnlike `VelocityJs` and `JQuery.animate` which were built for real-time user interaction,\nBeamToIX allows you to build complex frame based animations and save them frame-by-frame\nwith transparency at high resolution and lossless compression without frame drop.\n  \nWhen an animated story is designed to be rendered in the cloud,\nno software is required to install on the local machine,\nallowing video hosting services, ad network, e-commerce companies\nmany other businesses to provide a tool for their users to add text, images,\nand special effects to their images or videos by just using the web browser\nand then [teleport](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Library.Teleporter.html)\nthe story to the company's machine to render the frame images and generate animated gifs or videos.\n\nIf you find this project useful, please, read the [Support this Project](#support-this-project) on how to contribute.\n  \n## Components\n\nBeamToIX includes a web browser library, a render server agent and a command line utility.\nFor the BeamToIX Animation Editor, read [Animation Editor](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Animation_Editor.html).\n  \n- BeamToIX **web browser library** is a highly extensible TypeScript/JavaScript library\nbundled with a rich [toolset](#toolset) reducing the time to build complex animations.\n- BeamToIX **render server agent** is designed to communicate with a render server, usually a headless web browser, in order to save\neach frame to the disk. It can run either with the full potential supporting [Code Handlers](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Glossary.html#code-handler)\nor in a sanitized environment allowing you to safely to render animations created by other users.\n- BeamToIX **command line utility** allows you to build new projects,\nrender frames, create animated gifs or movies.\n\nRead the [requirements](#requirements) for details about the necessary software\nto install if you need to render, create gifs or movies in the local machine.\n\n## Features\n\n- Free and Open-source.\n- Simple and intuitive design.\n- Supports rendering in the cloud in a sanitized environment.\n- Extensively documented: [Documentation](https://www.devtoix.com/docs/beamtoix/en/latest/).\n- Absolutely minimum [dependencies](#requirements).\n- Highly Extensible via plugins including interpolators, functions, flyovers and tasks.\n- Tasks to build complex animations and F/X.\n- Multiple scenes (only default scenes are teleportable).\n- Scene transitions.\n- Expressions, functions and variables.\n- Parallel and off-sync property animations.\n- Teleportable JQuery-like containers.\n- Teleportable flyovers.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-rec-high-res.gif)\n  \n- Saves frame-by-frame into a file sequence with transparency and at high resolution.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-with-less.gif)\n  \n- Optional support for SCSS, LESS and TypeScript.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-virtual.gif)\n\n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-localization.gif)\n  \n- Localization of messages and plugin functionalities, including functions and variables.\n\n## Property Animation\n\nBeamToIX has a complex system that allows to interpolate pixels, numbers,\ntext, colors and much more.\nBeamToIX guesses the starting value and property type from CSS style information,\nor if that information is given via `valueStart`.\n- General CSS properties:\n\ne.g  `prop: 'border-style'; valueText: ['dotted', 'dashed']`.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-pixels.gif)\n  \n- Pixel properties.\n e.g. `valueStart: 10px; value: 100;`\n- Dual-pixel properties via [paths](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Library.Paths.html).\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-colors.gif)\n  \n- Color properties.\ne.g. `valueText: ['red', '#FF00AA'];`\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-counter.gif)\n  \n- Formatted numerical properties.\ne.g. `valueFormat: '%d%'; value: 100;`\n- Unformatted numerical properties.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-images.gif)\n  \n- Image properties.\ne.g. `prop: 'src'; valueText: ['a.png', 'b.png'];`\n- Text properties.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-class-prop.gif)\n  \n- `class` property.\ne.g. `prop: 'class'; valueText: ['+class1 -class2'];`\n- `visible` property.\ne.g. `prop: 'visible'; duration: 1; value: 1;`\n- `transform` property:\ne.g. `prop: 'transform'; valueFormat: 'rotateX(%fdeg)'`;\n\n## CSS Animations\n\nBeamToIX doesn't supports CSS animations, but BeamToIX was designed in a way that\nits animations are similar to CSS animations, therefore it's easy to convert CSS Animations\nto BeamToIX animations.\nBesides the property interpolation described above, BeamToIX also supports:\n\n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-item-delay.gif)\n  \n- Item-delay with `disturbance` to produce random effects.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-loop.gif)\n  \n- CSS animation-iteration-count.\n\n## Interpolators\n\nBeamToIX provides several interpolators, which can be defined by:\n\n- Teleportable Built-in interpolators. Accessible by name and ID.\n- Teleportable Expressions.\n- Plugins. Only official plugins can be teleportable.\n- Code Handlers due security reasons aren't teleportable.\n\nBeamToIX has following interpolators:\n\n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-easings.gif)\n  \n- Easings - The speed of motion.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-oscillator.gif)\n  \n- `harmonic` and `damped` oscillators - Rotation and Balancing motion.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-pulsar.gif)\n  \n- `pulsar` oscillator.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-paths.gif)\n  \n- Paths - n-dimension motion.\n\nThe interpolators are chained in the following order: easing→oscillator→path.\n\n## Toolset\n\nBeamToIX has a rich toolset. Extensibility and teleportation are the key features of these tools.\nUnless is noticed, all the built-in tools support teleportation.\nJust like in the case of interpolators, Code Handlers aren't teleported, and the tools can be extended via plugins but only official plugins are teleportable.\n\nBeamToIX has the following tools:\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-transitions.gif)\n  \n- Scene transitions.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-flyovers.gif)\n\n- `video-sync` flyover [[1]](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Library.Flyovers.html#video-sync-flyover).\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-wrappers.gif)\n  \n- Wrappers.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-text-tasks.gif)\n  \n- Text tasks:\n  - `text-split` task.\n  - `typewriter` task.\n\n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-factory.gif)\n  \n- `factory` task.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-decipher-text.gif)\n  \n- `decipher` task.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-attack-task.gif)\n  \n- `color-attack` task.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-shapes.gif)\n  \n- `shape` task.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-speech.gif)\n  \n- `speech` shape task.\n  \n![Image](https://www.devtoix.com/assets/beamtoix/gallery/animate-charts.gif)\n  \n- `charts` task.\n\nand much more [coming soon](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Roadmap.html).\n\n## Installation\n\nTo create animations, It's only required to have the `web browser library` without the need of any software installed in the computer.\n\nIf you have nodejs already installed, install using npm:\n  \n`npm install -g beamtoix`\n  \n## Requirements\n\nHowever, in order to render frames, generate gifs and movies, it requires:\n1. [nodejs](https://nodejs.org/en/).\n\n2. To render, it requires [puppeteer](https://www.npmjs.com/package/puppeteer) render server `npm install -g puppeteer`.\n   Puppeteer installs Chromium by default, since Chromium is outdated and it has less features than Chrome,\n   before installing puppeteer, read the following [note](https://www.devtoix.com/docs/beamtoix/en/latest/documents/FAQ.html#can-i-install-puppeteer-without-chromium)\n   on how to configure puppeteer to use Chrome instead of Chromium.\n   BeamToIX also supports `phantomjs` but since its features are outdated it is preferable to use puppeteer.\n\n3. To generate gifs, it requires to have [imagemagick](https://www.imagemagick.org) on system path.\n   For Windows users, read the following [note](https://www.devtoix.com/docs/beamtoix/en/latest/documents/FAQ.html#it-doesnt-creates-a-gif-file).\n\n4. To create movies, it requires to have [ffmpeg](https://www.ffmpeg.org/) on the system path.\n  \nTo check if 2-4 points are installed and configured, execute:\n  `beamtoix check`\n\n## Playground\n\nTry these examples online without any installation:\n\n- [Hello world](https://codepen.io/a-bentofreire/pen/rrRMRa)\n- [Image Overlays](https://codepen.io/a-bentofreire/pen/QxMPYR)\n- [Ad Example](https://codepen.io/a-bentofreire/pen/qKPdVo)\n- [E-Commerce](https://codepen.io/a-bentofreire/pen/aKyxyd)\n- [Charts](https://codepen.io/a-bentofreire/pen/mKjQXR)\n\n## Get started\n\nStart by creating a new project using the BeamToIX command line utility:\n  \n`beamtoix create myproject`\n\nBeamToIX web browser library root is `BeamToIX.Story`.\nWhen you create a story, you define an immutable number of frames per second,\nand all animations are interpolated based on that `fps`.\n  \non file `js/main.ts`:\n\n```javascript\n  let story = BeamToIX.createStory(25); // creates a story with 25 fps\n```\n  \nThe `story` holds a collection of Scenes.\nOnly one scene can be visible at a given moment in time except during the transition between two scenes.\nIt represents the natural concept of a scene in a storyline.\nBy using Scenes, BeamToIX can speed up the processing speed by reducing the global amount of calculations.\n\nThe bare-bones of a `html` file:\n\n```html\n  \u003cdiv class=\"beamtoix-story\" id=story\u003e\n      \u003cdiv class=beamtoix-scene id=scene1\u003e\n           \u003cp id=\"hello\"\u003eHello world\u003c/p\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n```\n  \nThe bare-bones of a `beamtoix.scss` file:\n\n```scss\n$beamtoix-width: 200;\n$beamtoix-height: 100;\n```\n  \nThe bare-bones of a `scss` file:\n\n```scss\n@use \"./../beamtoix\";\nbody,\nhtml,\n.beamtoix-story,\n.beamtoix-scene {\n  width: beamtoix.$beamtoix-width + px;\n  height: beamtoix.$beamtoix-height + px;\n}\n```\n  \nHtml Elements with `beamtoix-scene` class are added automatically.\nScenes can be added manually with the following code:\n\n```javascript\n const newScene = story.AddScene();\n```\n\nCreating scenes with `beamtoix-scene` class is the preferable way.\nYou add animations to the scene defining the time in 'seconds', 'milliseconds' or 'frames'\nbut if it's defined in time, these are converted to frames based on the story fps.\n\n```javascript\n  scene1.addAnimations(\n    [{\n      selector: '#hello',  // dom or JQuery selector\n      duration: '4s', // at 25fps, the duration is 100 frames\n      props: [\n        {\n          prop: 'left',  // property, text, url to animate\n          easing: 'easeOutQuad', // easing\n          value: 100 // end value\n        }\n      ]\n    }]\n  );\n\n```\n\nYou can add multiple properties in parallel or off-sync with the `position` or `advance` parameter.\n\n## Command line\n\n**BeamToIX** command line utility is used to:\n\n1. checks if requirements are configured: `beamtoix check`.\n2. create projects: `beamtoix create`.\n3. launch a live server: `beamtoix serve`.\n4. create a png file sequence: `beamtoix render`.\n5. create gifs: `beamtoix gif`.\n6. create video clips: `beamtoix movie`.\n\nFor detailed examples, read: [Command Line Utility](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Command_Line.html).\nRead [Requirements](#requirements) for details about the necessary software\nto install if you need to render, create gifs or movies on the local machine.\n\n## Documentation\n\n- [Documentation](https://www.devtoix.com/docs/beamtoix/en/latest/)\n\n## Known Issues\n\n- [Known Issues](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Known_Issues.html)\n\n## Migrating from ABeamer\n\nTo migrate from ABeamer to BeamToIX:\n1. rename all the files and text from \"ABeamer\" to \"BeamToIX\".\n2. rename all the files and text from \"abeamer\" to \"beamtoix\".\n\n## Migrating from Version 2 to Version 3+\n\nStarting version 3+ due scss deprecated `@import`, the following changes must be applies to projects in prior versions:\n- `beamtoix.ini` becomes `beamtoix.scss` and it must contains the `$width` and `$height` variables\n- `mains.scss` @import becomes `@use \"./../beamtoix\"`\n- `$width` and `$height` outside beamtoix must be prefixed with `beamtoix`.\n\n## Support this Project\n\nIf you find this project useful, consider supporting it:\n\n- Donate:\n\n[![Donate via PayPal](https://www.paypalobjects.com/webstatic/en_US/i/btn/png/blue-rect-paypal-34px.png)](https://www.paypal.com/donate/?business=MCZDHYSK6TCKJ\u0026no_recurring=0\u0026item_name=Support+Open+Source\u0026currency_code=EUR)\n\n[![Buy me a Coffee](https://www.devtoix.com/assets/buymeacoffee-small.png)](https://buymeacoffee.com/abentofreire)\n\n- Visit the project [homepage](https://www.devtoix.com/en/projects/beamtoix)\n- Give the project a ⭐ on [Github](https://github.com/a-bentofreire/beamtoix)\n- Spread the word\n- Follow me:\n  - [Github](https://github.com/a-bentofreire)\n  - [LinkedIn](https://www.linkedin.com/in/abentofreire)\n  - [Twitter/X](https://x.com/devtoix)\n\n## Contribute\n\n![Image](https://beamtoix.devtoix.com/assets/icons/warning.png) BeamToIX\nwas built on Linux/Chrome/Puppeteer and tested on Windows, Firefox, Opera, MS IE11 and MS Edge.\n\nTo keep an healthy cooperation environment, before posting an issue, please read\n[Code Of Conduct](https://www.devtoix.com/docs/beamtoix/en/latest/documents/Code_Of_Conduct.html).\n\nReport issues on [github](https://github.com/a-bentofreire/beamtoix/issues/).\n\n## License\n\nMIT License\n\n## Copyrights\n\n(c) 2018-2025 [Alexandre Bento Freire](https://www.a-bentofreire.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-bentofreire%2Fbeamtoix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-bentofreire%2Fbeamtoix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-bentofreire%2Fbeamtoix/lists"}