I first saw web characters queue up and jump off a cliff, and immediately wondered: would this make my client page too noisy?
It was 10 p.m. in Hangzhou, and I was updating my photography services page. I wanted more than a few photos and a short introduction, but every generic animation template felt like wearing a badly fitted suit. Then I tried Lemmings: it uses CSS animations to make a group of little characters walk, jump, and fall across a webpage. The result was charming, but it also reminded me that more animation isn’t necessarily better. My first attempt turned the homepage into a mini-game, and I nearly forgot that visitors came to book a consultation.
What it is, and who’s already using it
Lemmings is an open-source CSS animation project. Its basic idea is to break character movements into animated snippets for the web, then control movement, jumping, and collisions with simple configuration. It works best on event pages, portfolio hero sections, or interactive brand mascots—not on making an entire site move.
I know a designer, Lin Yue. In March 2025, she built a landing page for an independent podcast in Shanghai and turned the show’s mascot into a little character that jumped from the sidebar onto the subscribe button. She didn’t write complicated code; she adjusted the character assets, speed settings, and page placement. Another common use is adding a small guide character to a product demo page while keeping the button visitors actually need to click perfectly clear.
What it costs to recreate today—in money, time, and technical effort
For a direct trial, start your budget at 0 yuan. Bringing your own character images usually costs 0–300 yuan, though you can begin with the project’s included assets. A simple animation takes about 30–60 minutes to build.
The technical barrier is low: basic web styling and file uploading are enough. You don’t need to understand APIs, servers, or advanced animation logic. The first step is to open the project demo, find the “Code” area, and copy the character styles onto a test webpage. If even that feels like too much code for now, you can paste it into an online code editor to preview it.
I also messed this up once: I edited my live homepage directly, and the animation wandered around unpredictably on mobile. I recovered by creating a separate demo page first, then moving only the small section I liked back onto the site. That was much more stable.
How I’d choose it based on the stage I’m at
If I’m just starting out, I wouldn’t rebuild the whole website around it. I’d pick one event page or portfolio page, add a short animation, keep the budget under 100 yuan, and finish it within half a day. It’s also fine not to try it yet: clear service descriptions and contact details still matter more.
If I already have one or two clients and want the brand to be more memorable, I’d confirm the style with them, then use one fixed set of character assets for an interactive hero section. That avoids creating a separate system for every page.
If I’m scaling up, I wouldn’t let visitors feel as if they’ve entered an amusement park the moment they land on the homepage. I’d limit animation to event pages, tutorials, or product launches, then check mobile load times and make sure the buttons remain clear.
Not everyone needs this tool. If I sell a standardized service and clients prioritize speed, a static page may be the better value. I’d experiment on one low-stakes page first, then decide whether it belongs in my regular visual style.