HTML banner development tools for Node.js. Automate bundling and packaging of animated ads, mini games, demos and other single page web projects with a focus on size minimization. Inspired by and compatible with SmartHead's Banny Tools. Based on Rollup, Fastify and Svelte.
The main reason I created this was to replace an in-house tool with my own so that I could run old banners and independently start new projects with a compatible layout.
Waring: this is NOT an end user web app! It is meant to be run locally for development purposes only, not on a real server.
- ✔️ Project initialization, custom templates
- ✔️ JavaScript module bundling and babeling
- ✔️ Dev server with file watching and autorefresh
- ✔️ Sass support
- ✔️ GreenSock animation support
- ✔️ Built-in simple 3D engine based on WebGL
- ✔️ CSS animation generator that uses simple GreenSock-like input expressions
- ✔️ Capture individual frames of animation of GreenSock banners. Output PNG, layered PSD and animated GIF
- ️✔ Capture high-quality MPEG-4 videos of GreenSock banners at 60 fps
- ✔ Built-in Image Optimizer & Converter - reduce size of PNG, JPEG and SVG images with full control over quality trade-off
- ✔ Generate inline base64-encoded CSS background-images for fully self-contained banners
- ✔️ Web font generator with subsetting
- ⌛ GLSL shader bundling
- ✔️ Banner Builder - prepares banner for publishing on advertising platforms
- ⌛ Banner Deploy - build banners in batch from Git repository
- ⌛ Banner preview tools: resizer, timer, event manager, etc.
npm install
npm link
BT is a single command line tool that performs several different tasks.
To create a new banner in an empty directory:
bt init
To run the development server:
bt run
To capture screenshots of predefined animation frames (for GreenSock template only; dev server should be running):
bt capture <resolution>
To capture video (for GreenSock template only; dev server should be running):
bt capture video <resolution>
To build banner for publishing:
bt build <platform>
where <platform> is one of the supported ad platforms (see specs and platforms.js for details).
Example:
bt build display360
You can add your own platform specifications to specs directory and use them.
bt init will create a project using a default template that uses GreenSock animation library. Additionally Anime.js-based template is available for fully self-hosted banners with as small size overhead as possible:
bt init anime
You can also add your own templates to templates directory and use them.
Development server runs at http://localhost:8000/ and serves project's HTML directory (banner's static files). Additional services are available at the following routes:
http://localhost:8000/preview- developer's preview pagehttp://localhost:8000/images- Image Optimizerhttp://localhost:8000/fonts- Web Font Generatorhttp://localhost:8000/build- servesbuilddirectory with latest publish-ready banner build, if it exists.
- Banner Toolchain. Copyright (c) 2020-2022 Timur Gafarov. Distributed under the MIT license.
- cwebp. Copyright (c) 2011 Google Inc. Distributed under the BSD 3-Clause License.
- Efficient Compression Tool (ECT). Copyright (c) Felix Hanau. Distributed under the Apache License.
- Highlight.js. Copyright (c) 2006 Ivan Sagalaev. Distributed under the BSD 3-Clause License.
- Puppeteer Recorder. Copyright (c) 2017 Clipisode. Distributed under the MIT license.
- lightgl.js. Copyright (C) 2011 by Evan Wallace. Distributed under the MIT license.
BT would not be possible without the following amazing software: