A developer has created a working implementation of the Lemmings puzzle game using CSS animations and text columns, demonstrating how text-based layouts can serve as playable environments.
According to the source, the animation uses text reflowing as a core mechanic. Columns of text reflow when the window changes size, which the developer identified as an ideal opportunity to trigger the launch of walkers into the game space.
The design treats each line of text as its own floor within the game world. Walkers can drop from one line to another as they navigate downward, and they can fall off the end of shorter lines to land on whatever structure exists below them.
A key design consideration was ensuring that text itself doesn’t obstruct the walkers’ movement. The developer notes that lines sit closer together vertically than a walker is tall, preventing text from blocking their paths. Only visual elements like borders, boxes, buttons, images, and form fields create actual obstacles that walkers cannot pass through. This separation between text and collision detection keeps walkers from becoming stuck between lines of a paragraph.
At the bottom of the page, the developer included a long floor to catch anything that falls all the way down, providing a safety net that prevents walkers from falling indefinitely and ensuring the game remains functional across different window sizes.
The project showcases how CSS-based animations and responsive text layouts can be repurposed for interactive entertainment, turning a common web design challenge—text reflow on resize—into a game mechanic. The implementation treats typography and layout as structural game elements rather than mere content, blending visual design with interactive functionality in an unconventional way.
Key facts
- Each line of text serves as a floor in the game
- Walkers can drop between lines and fall off shorter lines
- Text doesn’t block walkers; only borders, boxes, buttons, images, and fields create obstacles
- A long floor at the bottom catches falling walkers
- The game uses CSS animation with reflowing text columns