Before AI: 2015
Drawn by hand. Eleven years later: remade in minutes, then an arcade.

The artifact

The original files were lost to new computers and dead drives. The Wayback Machine capture of 23 April 2015 ↗ kept them: the page, the CSS and every sprite sheet. Nobody can fake a capture date, so it is our proof that the micro animation idea is more than eleven years old.

We restored the three exactly. The CSS on the companion page is the 2015 file, byte for byte. Angular is gone; four lines of plain JavaScript do what its clicks did.

How it worked in 2015

• One strip of frames. Every frame drawn in Illustrator and laid side by side on one sheet, exactly one frame-width apart. Shift a frame by a pixel and the animation jumps.
• A window onto the strip. A fixed box (the cup is 84 × 84 px) with the sheet as its background.
• steps(n) does the cutting. The keyframes slide background-position from the first frame to the last, and steps(n) makes it jump frame to frame. The cup fills in steps(11): 11 jumps of 84 px in 0.6 s.
• Stages chained by delay. The laptop opens (steps(13), 1.2 s), then types (steps(8)), then scrolls code forever (steps(10), infinite).
• A class is the state. A click adds or removes one class: paused, close, drinkMe. The class swaps the animation.

It took about a week, as an experiment (Chris's estimate). Most of that week was drawing the frames.

Same art. / Three ways.

• 2015 · CSS sprites. The original, byte for byte. Oh, that's cool.
• Fizlet · remake. The same frames, timings and clicks, rebuilt on the kernel in about six minutes of agent time.
• Fizlet · arcade. The same frames, ×100. Hit the cups: bass, bounce, ♪ notes, an equaliser on the phone. Pour and sip: splash, steam, slurp. Open the lid and hammer the keys: clicks, a spray of code, a lit screen. Chain them for a combo.

Every effect in the arcade comes from a brick: fizlet/fx for the notes, splash, steam and code, fizlet/sound for the thump, clack and slurp, fizlet/hud for the score. Real buttons, keyboard, and still frames under reduced motion. When the round ends, it asks for no frames at all.

2015 vs Fizlet, measured

• 1,870 B

  2015, gzip: the original CSS plus a four-line script. Bricks: none

• 4,025 B

  the remake's JS, gzip: the kernel (3,413 B) and the strip that plays the frames

• 11,289 B

  the arcade's JS, gzip: kernel, fizlet/fx, fizlet/sound and fizlet/hud

• 0

  animation frames a second the arcade asks for once a round is over

Bigger code, / quieter page.

The bytes go up, and we say so. 2015 is pure CSS, so it ships the least code. The remake adds the kernel. The arcade adds the bricks that make the noise and the particles.

What the bytes buy: a CSS sprite costs no JavaScript, but the browser recalculates style on every frame while one loops. In 2015 that was 60 times a second for as long as the laptop stayed open. Fizlet writes only when a frame changes, and once the arcade's round is over the page goes fully quiet.

Time is not like for like either. 2015 was about a week, mostly drawing. The remake reused those drawings and took minutes of code. That is the point: eleven years of craft, now a few minutes of code.

In Chris's words

"It's the origin of the passion that has not left, only got stronger. With the engine it means the sky's the limit: time and complexity are removed and I can create all the cool things I can think of. Just walking my dog I can chat into my phone and create a new game, all because of the power of Fizlet, which started from my passion to make the DOM more interesting. Even when it was hard I still had the passion, and it's just stronger now that we built such a strong tool."

"There were a lot of animations before Fizlet, and in between. We kept writing the same thing over and over, a little different each time for a slightly different use. So we built Fizlet to make it easier for us. Then we figured other people could get something out of it too, so we open-sourced it."

In 2015 the DOM was harder to animate. Getting it fast meant knowing which properties were cheap to move and which made the browser work. Fizlet is that knowledge, written down once and tested.

Questions

The only blocker

"Fizlet makes creativity the only blocker, and I have a lot of that!" (Chris Cooley)