Tinseltown.js

A lightweight library for faux Hollywood-style page loading effects.

Less than 4KB in size

One line of JavaScript

Simple yet flexible

Powered by randomness

What is Tinseltown.js?

Tinseltown.js is a small library to help design UI with flashy loading effects like the ones we see in media, from low-budget hacker movies to futuristic sci-fi blockbusters... Stuff you would find on /r/itsaunixsystem.

"Tinseltown"...?

Tinseltown is a nickname for Hollywood, where we get some of our cheesiest hacker movies and TV shows from. Tinsel (the decorative material) also happens to be shiny and glittery, sort of like the effects included in Tinseltown.js. :D

So, how does this work?

Tinseltown.js consists of two tiny files.

  1. A JS file, which assigns random (or not, if you prefer) animations, assigns random animation start times, and provides several utility functions for more control.
  2. A CSS file, containing a few CSS-based (efficient!) animations, and a class-based API system used by Tinseltown.js. Choose from tnsl-flicker, tnsl-flickerQuick, tnsl-slideFromLeft, tnsl-slideFromRight or tnsl-random (see documentation for more info).

The CSS file contains animations which would otherwise look meh. But Tinseltown.js uses Math.random to put some life into them. By offsetting start times of the animations, web pages look like something straight out of The Matrix.

No dependencies!

 Download  Docs