asib 2026-02-27 15:42 UTC link

I love Josh's blog and writing. I have to wonder what place this kind of content has in an age where agents are writing all the CSS. It sort of feels like hand tool woodworking now - there are people that will still get a kick out of designing things themselves, but it's going to be much less common. Maybe it already was like that anyway.

Gualdrapo 2026-02-27 16:11 UTC link

I remember Microsoft Front Page had a feature about doing buttons with image sprites and it spitted a ton of JS gibberish.

I don't think the example of the trophy in the article is a good use case this days, you could draw that trophy as a SVG and animate the flames with GSAP or something, or draw each flame frame as a <symbol> and animate that with CSS.

EvanAnderson 2026-02-27 16:42 UTC link

I think animation was the less common use case. Sprites were a nice way to get multiple images in a single HTTP request. Latency on dialup was murder and getting more in a single round trip was better. If you have a bunch of similarly-sized elements stick them all in a single file and use CSS to make multiple references to the same file display different images.

hyperhello 2026-02-27 17:03 UTC link

Josh, I was reading, and then a little man slid in from the left side, blocking the text I was reading, and said "Hey, friend! Would you like to subscribe to the newsletter?" I believe the site used CSS animation-timing-function:ease-in-out. My intuition told me that the slide was completely wrong for the situation.

First, the most important signal that any animation provides is this: the computer is doing this for you. This goes in the negative too: if you click and drag a file icon, the drag sprite may be translucent or highlighted somehow, but it should not 'animate' to your mouse cursor. The file icon should be attached to the cursor location with no delay.

However, suppose you drop it somewhere it can't go. The interface should then animate the file back to where it belongs; that's the computer 'putting it back'. Now, the timing function; how should the file go back? Slowly back away from the cursor? Accelerate to the return location, then slow back down again? No, it should very quickly snap away from the cursor, then settle where it belongs. You'll notice things like this as part of fit and finish; they are communication.

The man coming from the left eased in and then slowly stopped. This is profoundly wrong, like a person sneaking out of a dark place, then slowly coming to rest in front of you staring into your eyes, it is very much threat behavior. You want the person to come in a friendly way, so he can sell you something or convince you to smash the subscribe button. The correct animation is to simply appear halfway in, far enough you can see his smile; stop for 0.5s, indicating he is occupying the space; then slowly ease-in-ease-out the rest of the way.

Then the speech bubble should fade in, indicating that the computer is talking, and you as the user must act, like when a dialog says "Save your work now. I take your laptop away in 30 seconds. Look in my eyes, I am the user now."

KaiserPister 2026-02-27 17:10 UTC link

I built 8bitsmith.com as a tool to make controlled sprite sheets. It was an experiment in vibe-coding and controlled asset creation, so pricing is basically a pass-through cost of using Gemini.

semolino 2026-02-27 17:34 UTC link

Love Josh's work and usually always learn something new from his tutorials.

However, this time, I was really hoping the example implementations would use CSS transforms instead of properties that require repaints, especially since the rationale given here for using sprites is performance.

Maybe layer compositing warrants its own article and is beyond the scope here, but you can really tell when whoever built a frontend knows their stuff because all animations are hitting a consistent 60fps.

lelandfe 2026-02-27 19:13 UTC link

> While this technique is seldomly used on the web, it’s used all the time in video games

Seldomly used now, perhaps. Is the author unfamiliar with the history of the technique? This was everywhere on the web. It’s how Facebook served almost every icon and UI asset.

Back in the day we used 'background-position' to slice up the sprite map. There are articles on A List Apart describing this that are over 20 years old now. It was also the underpinning of the site’s legendary “sliding windows” technique, which was dominant on the web for some time.

E: I should add that one reason for its popularity was that we didn’t have HTTP multiplexing yet and so you wanted a small count of images/resources on the page

canpan 2026-02-27 22:17 UTC link

If I remember correctly I think I saw it used on the butterflies here https://traveloregon.com/only-slightly-exaggerated/ (On my phone now, cannot check)

araes 2026-02-28 00:23 UTC link

Tried this a little bit ago when making a website to try and qualify for the No JS Club inclusion. Wanted to include a bunch of interactive torches that would light when you click on them, and then turn off with subsequent clicks. Grabbed a bunch from the old Geocities gif image archive [1], and then turned them into something similar to this article.

[1] https://gifcities.org/search?q=torch

Part I found a bit difficult was using background images, rather than using <img src""> links, and performing x and y shifting to minimize the use of enormous aspect ratio image files (really long strip of image sideways).

Finally settled on something that looks like:

  .fire_torch2.trch_sprt {
    position: absolute;
    width: 24px;
    height: 53px;
    bottom: 0px;
    left: 0px;
    background-image: url('../items/fire_torch2_sprite.png');
    background-position: 0px 0px;
    background-size: 120px 265px; /* 5 columns * 24px, 5 rows * 53px */
    animation:
      fireTorch2SpriteX 0.55s steps(5) infinite, /* 1 second to complete one row */
      fireTorch2SpriteY 2.75s steps(5) infinite;
    display: none;
  }

  @keyframes fireTorch2SpriteX {
    from { background-position-x: 0; }
    to { background-position-x: -120px; } /* 5 columns * 24px */
  }

  @keyframes fireTorch2SpriteY {
    from { background-position-y: 0; }
    to { background-position-y: -265px; } /* 5 rows * 53px */
  }

Interactivity is handled by using the checkbox hack like so:

  .fire_torch:has( .Lntrn_fire_swtch:checked ) .trch_drk { display: none; }
  .fire_torch:has( .Lntrn_fire_swtch:checked ) .trch_sprt { display: inline-block; }

The part that's weird with background images though, is that you have to set them up with negative (-) background shifts. So the 24px x 53px image actually shifts -120px sideways each time it goes through an x-loop.

Further, since the sprite sheet is actually 120px x 265px to handle 5 rows of 5 frames, it then requires a somewhat complicated @keyframe definition setup. It actually needs one x-loop that's short, and loops endlessly, going through the full 5 frames, and a second 5x step length y-loop that then iterates once every full x-loop.

Actually imagery and animations that can be played with can be found here: https://araesmojo-eng.github.io under "Lantern Tests Menu"

NOTE: Needs the lantern to function and light the torches. Requires other minor puzzles on the website.

zarzavat 2026-02-27 15:57 UTC link

LLM are actually really bad at writing CSS. CSS is 20% logic and 80% art. The machines just don't understand what is attractive and what is ugly. I hand write all of my CSS and I don't see that changing any time soon.

zovirl 2026-02-27 16:54 UTC link

Additionally, the file size of the sprite sheet image is often smaller than the combined file sizes of the individual images. (I never looked into why but expect it has to do with sharing overhead and the compression dictionary)

hyperhello 2026-02-27 17:29 UTC link

I don't understand why this is downvoted. But then, I don't really understand HN moderation at all.

xnx 2026-02-27 18:09 UTC link

Also a workaround for per host connection limits.

k33n 2026-02-27 18:48 UTC link

It's also worth noting that if you're looking to eliminate an additional request, data-urls are a nice way to be fully flicker-free.

croisillon 2026-02-27 20:00 UTC link

the technique was everywhere for static icons, not for animated images

Editorial Channel

What the content says

Structural Channel

What the site does