Lemmings CSS Animation
222 points by MarkBlah 7 hours ago | 46 comments

rfarley04 4 hours ago
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.

[1] https://www.youtube.com/watch?v=F_RmG9WB4BE

reply
TacticalCoder 4 minutes ago
> ... is one of those times when nostalgia is so overwhelming

1991, Psygnosis (of course), Commodore Amiga (double of course!): my little brother was 9 y/o at the time and we were teenagers and we'd play Lemmings like crazy on our Amiga.

My little brother couldn't speak english yes but he'd imitate the "oh, nooooo" sentence Lemmings you'd "suicide" would make.

More than three decades later my brother is still nicknamed "Lem" after "Lemmings" and that's how we call him. And about two decades ago, he gave his consulting company a name sounding like "Lemmings" (spelling slightly different). He's still "Lem" and he still has got that company.

Oh noooooooo!

reply
MarkBlah 3 hours ago
Haha yea I pulled the sprites from the original game, I was thinking the same, an umbrella or die, it’d be a good way to artificially increase web analytics, maybe a message bubble
reply
shevy-java 2 hours ago
Agreed - but what is shown on the webpage here, is not really lemmings.
reply
MarkBlah 17 minutes ago
Duh
reply
SanjayMehta 2 hours ago
I played this for dozens of hours with my dad yelling helpfully over my shoulder. I still have the floppy in storage, but with no drive to read it.
reply
Waterluvian 7 hours ago
That’s pretty sweet.

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.

reply
tomcam 6 hours ago
https://ablakey.ca/

Nice! Your site is impressive and your achievements even more so.

reply
diginova 6 hours ago
the base plates lighting up showing history of where the robot travelled is a fun detail
reply
tniemi 2 hours ago
reply
cs02rm0 2 hours ago
I recently put lemmings into some clinic management software I've been working on as a software egg.

https://postimg.cc/gxvZHbgG

reply
OuterVale 5 hours ago
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.
reply
ggsp 6 hours ago
Cute :) It has a couple of zoom bugs on mobile, something like

html { overflow-x: clip; touch-action: manipulation; }

should fix them!

reply
MarkBlah 6 hours ago
Oh awesome thank you, I will add this in
reply
noufalibrahim 5 hours ago
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.
reply
tosh 5 hours ago
reply
noufalibrahim 5 hours ago
That's the one! Thanks.
reply
richardfey 4 hours ago
Funny how they keep hopping on a toggling horizontal scrollbar there at the bottom.
reply
MisterMunchkin 3 hours ago
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
reply
freshteapot 4 hours ago
Took me a moment to realise I could pick them up and place them, on things and in things.

Thank you for bringing this to life.

reply
felipeerias 5 hours ago
Love it!

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.

reply
dspillett 28 minutes ago
As the first paragraph says (“Drag one to carry it”) you can move them around to put them on/in the parts that you want to test their interactions with.

Other than respawning them as you scroll around, so one starts in an appropriate place as a test comes into view, and resetting them automatically, perhaps on a timer, there probably isn't a better way to properly show it off than that.

reply
9dev 5 hours ago
Right, I thought the same. Construct it such that a Lemming falling down from the top will have to clear every level to the bottom instead of just falling past all of them.
reply
VorticonCmdr 3 hours ago
love it. I did build a html-in-canvas version (https://github.com/VorticonCmdr/lemmings) for fun and I love how creative other people get
reply
metchio 20 minutes ago
this is awesome
reply
ForgotMyUUID 33 minutes ago
So cute!
reply
adamddev1 3 hours ago
Nothing good comes from vib...

Ok, this is awesome.

reply
grumbel 5 hours ago
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.

[1] http://xpenguins.seul.org/ and updated at https://github.com/Grumbel/xpenguins-ng

[2] https://xpenguins-web.github.io/

reply
jcattle 4 hours ago
Just a note for you: Nothing at all shows up for someone who has prefers reduced motion on.
reply
MarkBlah 4 hours ago
Haha that’s cool, need to hunt sheep.exe
reply
rob74 4 hours ago
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...

reply
filcuk 4 hours ago
They are...
reply
ckx 3 hours ago
Really fun to play around with! Good job!
reply
WhyIsItAlwaysHN 4 hours ago
Thank you for making this. It was really fun and a really pleasant start to my day.
reply
alana314 6 hours ago
This is fantastic.
reply
allexsendev 4 hours ago
mad impressive imo, spawned like 50+ ppl and still running smooth (although must say I have a monster rig).

And I overenjoyed throwing lil marios around

reply
MarkBlah 3 hours ago
The tick rate isn’t high so should be able to have thousands
reply
allexsendev 3 hours ago
Could be, yeah, didn't look deep into it. Just speaking from my experience with the flashy websites doing impressive demos usually starting to lag fairly soon.
reply
nilail 5 hours ago
Super funny idea ! But it does not follow the scroll down on Safari
reply
swiftcoder 4 hours ago
I love that they can also walk on the text headings
reply
MarkBlah 7 hours ago
A tribute to Psygnosis, just for fun
reply
msephton 2 hours ago
Psygnosis were the publisher, DMA Design were the developers (you might know them from their other big game: Grand Theft Auto)
reply
shevy-java 2 hours ago
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.

reply
cheapcheerful 5 hours ago
Awesome. Loved the originals.
reply
jdw64 3 hours ago
Oh, this game brings back memories
reply
memming 5 hours ago
Now that's what I'm talking about.
reply
tmountain 4 hours ago
[dead]
reply
clilog_d 5 hours ago
[flagged]
reply