npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bilza

v0.1.2

Published

A Javascript Animation Engine for creating responsive animations on HTML5 Canvas

Downloads

895

Readme

Core Props Examples      Comp Projects


What is Bilza


A Javascript Animation Engine for creating responsive animations on HTML5 Canvas.


Bilza.js Basic Idea

  1. Bilza.js will enable you to create JavaScript animation that behave like a video. You can "play", "pause", "stop", "skip forward" and "skip backward" the animation just like a video. You can also draw any random frame from in between the animation or save that as an image.

  2. Bilza.js will enable you to create slide (presentations, lesson plans, advertisements etc) and then share them as html / javascript file.There are many content types (e.g. educational slides, business presentations etc.) which we want to be presented like a video but should be editable like normal text (or a PowerPoint presentation). In case of video format; editing is very expensive and time-consuming. Bilza.js final product is a simple JavaScript file that will run in any (decent) browser anywhere.

  3. In case you want your message / presentation to reach millions of viewers and the message is in videos format: the file size will be in Mega Bites (and this is on the lowest side). Imagine how many people will be reluctant to download such a heavy file or to share it. On the other hand, a JavaScript animation is very lightweight as compared to video format.  A JavaScript animation carrying the same message may have a file size of few kilo Bites. The heaviest thing in a JavaScript animation is the sound file.

  4. The single main "pain point" of creating JavaScript animation is creating responsive animations. We like our animations to fit all screen sizes. For this the bilza.js has been written with responsiveness in mind and (almost) every thing grow and shrink according to the screen size.

  5. Animation is code and Code is Reusable : One of the basic purpose of this library is to enable users to stitch together small pieces of animation and create complex animations.

  6. There is NO installation, NO plugins and NO dependencies (on any other library). This will enable your clients to consume your content with out any hassle.

  7. It is NOT morally and ethically correct for any developer / app to hold the data of its users as hostage. The hard work and effort that a user has put into creating an animation makes him the creator and owner of that animation. For this there will always be some command present in the library (working on it currently) which should enable the user to get their animation data in json format.  


Basic Feature

  • Ease of use
  • Responsiveness
  • Composable Animations
  • Behave like a Video


Important Sections of Documentation

How Bilza.js Works

Hello world Example

All Components Core Props Examples

Projects to showcase every component

Bilza.js Documentation (work in progress)


Selected Examples

Six Arrows

Colored Circles

Colored Circles

Colored Circles

100 Rectangles

100 Rectangles

Lines Animation

Lines Animation

Text and Grid Example

Text and Grid Example

Random Lines

Random Lines

Four Pics

Four Pics

Grid Lines Width

Grid Lines Width

Dancing Circles

Dancing Circles

100 Circles

Circles and Grid Example

Circles Component Demo

Circles Component Demo

Animating Grid

Animating Grid

Font Size Animation

Font Size Animation

Line Animation

Line Animation


If you want to be in touch or send me a bug report please use github issues.


23-sep-2022   (version 0.1.1) // - Arrow and Marker
17-sep-2022   (version 0.1.1) // - Big Changes in API
04-sep-2022   (version 0.1.0) // - Alhamdullah
06-aug-2022   (version 0.0.30) //0 ver short of 0.1.0
04-aug-2022   (version 0.0.29) //1 ver short of 0.1.0
26-july-2022   (version 0.0.28) //2 ver short of 0.1.0
25-july-2022   (version 0.0.27) //3 ver short of 0.1.0
23-july-2022   (version 0.0.26) //4 ver short of 0.1.0
22-july-2022   (version 0.0.25)
20-july-2022   (version 0.0.24)
13-july-2022   (version 0.0.23)
9-july-2022   (version 0.0.22) //Getting close to 0.1.0
7-july-2022   (version 0.0.21) //also ver 0.0.20
2-july-2022   (version 0.0.19) //release candidate for 0.1
21-june-2022   (version 0.0.17) //also ver 0.0.18
06-jun-2022   (version 0.0.16)
03-jun-2022   (version 0.0.15)
09-May-2022   (version 0.0.14)
08-May-2022   (version 0.0.13)
15-Apr-2022   (version 0.0.12)
28-March-2022 (version 0.0.11)
27-March-2022 (version 0.0.10)
26-March-2022 (version 0.0.7)
25-March-2022 (version 0.0.5)