I played this game for dozens of hours with my dad growing up and seeing and playing with these animations is one of those times when nostalgia is so overwhelming and unexpected that I feel physically dizzy. If the animation had the sounds of lemmings dying when they fell from too high[1] I might have been hospitalized. Good work.
I did something on my site recently like that where you can click a hexagon and it turns into a robot and starts SLAM mapping the page, navigating around text elements carefully.
Were you initially surprised by how easy it was to get exact block size of individual characters and not just entire dom elements? That’s the part I thought was going to be the most difficult.
I don't know if I'm remembering this correctly but there used to be a site called html5lemmings (or something similar) where you could play a few levels of the game. This was before modern web applications and things were still mostly server side rendered with minimal javascript. The demo was quite impressive. I don't know if it's still there. Couldn't find it with a quick search.
Interesting experiments and differences between the browsers.
Using the test:
(async () => {
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
for (let i = 0; i < 200; i++) {
__walker.add();
await sleep(10);
}
})();
From the JavaScript console, on both Chrome and Safari.
The animation is _way_ smoother on Chrome, but scrolling on that page becomes really painful.
Safari, on the other hand, uses a lot more CPU to do the animation, and the FP of that animation drops dramatically as you change the number of lemmings from 10 -> 50 -> 100 -> 200. However scrolling the page remains smooth the entire time.
I enjoy putting the lemming in the margin on the bottom of the viewport at the left or right side then scrolling down such that the lemming plummets. Then, scrolling up, I can make it bounce up as if it is on a trampoline. Very funny.
I vibe-ported xpenguins[1] to Web[2] recently, can be used as bookmarklet and let run on any website. No original Lemmings in that one however, only the knockoff penguins.
Okay, this reminds me of an game from a similar time period where there would be these two tanks firing at each other from across the screen, one at a time. Does anybody remember that and what it was called?
Cute. However, the fact that this is possible shows how ridiculously out of control CSS is. It is supposed to control appearance, and that does not entail being Turing complete.
I remember having Lemmings and messing with the animation sprites from the game--I don't recall if they were saved in a bmp format or if it required a tool to extract. I'd try to recolor their hair or change their outfits pixel by pixel, but there were a lot of animations and a lot of frames. I always wanted to use them to build a Tetris/Lemmings hybrid game (the two games with the best music), but never got around to it.
This sent me on a lemmings hunt and I found someone porting all of the lemmings games and community levels to Mac - https://github.com/ErikVeland/Lemmings
Cute, but it would look nicer if the walkers were... you know, actually walking? Ok, might be hard to do with CSS to be fair, I don't know enough about CSS animation to judge that.
EDIT: works in Chrome and Firefox, doesn't work in Edge (on Linux - yeah, I know almost nobody uses that) for some reason...
That kind of misses what made Lemmings fun though.
Without digging and building stairs and parachutes,
it is only Lemmings in name, not in spirit. Also,
exploding lemmings - this can probably be done via
CSS animations.
Lemmings CSS Animation
(markblah.github.io)408 points by MarkBlah 5 November 2026 | 78 comments
Comments
[1] https://www.youtube.com/watch?v=F_RmG9WB4BE
I did something on my site recently like that where you can click a hexagon and it turns into a robot and starts SLAM mapping the page, navigating around text elements carefully.
Were you initially surprised by how easy it was to get exact block size of individual characters and not just entire dom elements? That’s the part I thought was going to be the most difficult.
https://postimg.cc/gxvZHbgG
html { overflow-x: clip; touch-action: manipulation; }
should fix them!
Using the test: (async () => { const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); for (let i = 0; i < 200; i++) { __walker.add(); await sleep(10); } })();
From the JavaScript console, on both Chrome and Safari.
The animation is _way_ smoother on Chrome, but scrolling on that page becomes really painful.
Safari, on the other hand, uses a lot more CPU to do the animation, and the FP of that animation drops dramatically as you change the number of lemmings from 10 -> 50 -> 100 -> 200. However scrolling the page remains smooth the entire time.
[1] http://xpenguins.seul.org/ and updated at https://github.com/Grumbel/xpenguins-ng
[2] https://xpenguins-web.github.io/
Explanation: https://www.youtube.com/watch?v=uZ1atMUOUMU
Thank you for bringing this to life.
Ok, this is awesome.
https://www.youtube.com/watch?v=82cqmq6quXI
It is unfortunate that the scenery is positioned in such a way that lemmings end up falling by the side all the way to the bottom of the screen.
Perhaps it would look better if you removed the padding from <body> and added more pits to the scenery.
EDIT: works in Chrome and Firefox, doesn't work in Edge (on Linux - yeah, I know almost nobody uses that) for some reason...
And I overenjoyed throwing lil marios around
Without digging and building stairs and parachutes, it is only Lemmings in name, not in spirit. Also, exploding lemmings - this can probably be done via CSS animations.