Potato Sprites and Musical Billiards
Hey friends,
How many tickles does it take to make an octopus laugh?
Ten-tickles 🐙
(Oof, that one's pretty bad 😅).
Thinking Too Hard
I spent time last week investigating sprite animations. And yes, I'm talking sprites like ye olde video games. For pixel art, it's a blast, especially if you have something like Aseprite. Just look at these little vegetables (well... and one fruit...) I made:
Super cute. But sprites work for more than just games. They're also great for:
- Faking 3D objects
- Allowing transparency
- Scrubbing through an image sequence (Apple did this with the AirPod site)
You can see a demo of all three at: https://nathan-long.com/experiments/gsap-sprites/ and you can check the code here.
One of my coworkers also pointed out with webp and avif we can REALLY crunch down these transparent pngs like we wouldn't have been able to a few years ago. It's a viable technique IF (big if) you can get the generated assets. That's the hard part. I can change a few pixels per frame for my vegetables, but you'd need some 3D chops to generate the phone and Airpod image sequences from the demo.
Interesting Web Bits
- We now have a native API to detect if the browser window is inactive.
- Lynn Fisher writes about her ongoing project of amazing single div CSS illustrations.
- HTMX 2.0.0 was released
- A fun little... music..? maker with colliding billiard balls