Lemmings CSS Animation
- ID
- 43513
- Status
- summarized
- Published
- 05 Nov 2026, 12:54 PM
- Fetched
- 06 Nov 2026, 3:17 AM
- Provider
- Hacker News
- Category
- dev-community
- Original URL
- https://markblah.github.io/lemmings/
- Source URL
- https://hnrss.org/best
Summary
- Score
- 5.0
- Created
- 06 Nov 2026, 3:18 AM
- Tags
- Audience
- developersvibe_coders
What happened
A browser toy where Lemmings-style 'walkers' roam a real HTML page, added via a button or `__walker.add()`, dragged to be carried, and flicked to be thrown. Layout is treated as physics: borders, boxes, buttons, images and form fields are solid, text lines are walkable floors that walkers can't get stuck between because line spacing is smaller than a walker, and resizing the window launches anyone standing on a moving surface. Cards reflow onto new rows as the window narrows and shove walkers along, and one long floor near the page bottom catches anything that falls.
Why it matters
It's a working example of driving a toy from live DOM geometry instead of a hand-authored level map — the collision surface is whatever the browser laid out. If you build interactive UI, the reusable idea is the deliberate rule that text lines are floors but never blockers (spacing kept below walker height) to avoid characters wedging inside paragraphs. Nothing here changes what you ship; treat it as a technique demo, not a dependency.
Discussion angle
Resize is normally a bug source — here it's a launch mechanic. Worth asking: which of your UI's 'annoying' behaviours (reflow shoving elements, content jumping on window resize) could be reframed as an intentional feature, and where does that framing just hide a real layout bug?