OG THE ORIGIN · A HERO SCENE
. Sleep. Drink. Repeat.
A designer's and developer's day as a loop. Night: head down on the desk. The sun comes up, the headphones go on, the coffee goes down, and the laptop and phone run all day. Night falls, the lid closes, repeat. Tap the word to switch the screens between code and design work. Close the laptop and he sleeps; open it and the day starts.
Why Fizlet. 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.
Inspired by the original 2015 portfolio, with Fizlet flair. The headphones, the coffee and the laptop are the props from my 2015 portfolio, back as living things; in the 2015 look the cup is the 2015 sprite sheet itself. The look key switches between the 2015 palette and Fizlet's: cyberpunk meets Tron, in the site's own tokens. By Chris Cooley ↗.
The cup is a toy. Tap it for a sip, double-tap it to refill it, drag it anywhere on the desk, flick it to knock it over (tap the spill, or wait). On the keyboard: Enter sips, R refills, the arrow keys move it.
Tap the plant to water it, the notebook and he writes a line of code or draws a doodle, the lamp to switch the light. Tap the phone for country, rock or pop: each a one-bar loop on the audio clock; a double-tap pauses it. Tap the laptop's screen and he sleeps; tap it again and he wakes. Keep feeding him coffee and he won't sleep. The scene keeps its own day: light by day, dark by night.
Live chunk 35,560 B gzip (six bricks + the scene) · loader 2,128 B (@fzlt/core/slot) · poster 6,555 B inline (both looks) · 2015 coffee sheet 6,961 B PNG. Measured on this build.
| Brick | Bytes | What it moves |
|---|---|---|
| @fzlt/core (kernel) | 3,372 B | One loop at 30 fps; settles when nothing moves; the ledger gives the page back |
| @fzlt/core/timeline | 2,137 B | The day and night cycle (sky, shade, sun); the wake, sleep, sip, pour, spill and watering sequences |
| @fzlt/core/fx | 2,792 B | ♪ notes, coffee steam, sparks of code (or swatch chips), the splash, the Zzz |
| @fzlt/core/sound | 1,062 B | The phone's looping genres on the audio clock, key clicks, the sip, taps, the pour, the spill; silent until your first tap or key |
| @fzlt/core/input | 1,335 B | Taps on the laptop, cup, phone, plant, notebook and lamp; the cup's drag and flick; their keys |
| @fzlt/core/sprite | 1,437 B | The pixel coder dancing on the phone |
| @fzlt/core/slot | 1,849 B | Loads the scene near the viewport, on an idle main thread (main.js) |