How to Add an RPG Level System to Your Website
Here’s how to turn your website into an RPG character — a gamification system where every finished task gets logged as a quest, earns XP, levels the site up, and unlocks visual effects at each level. I added it to this site (sonnyplot.com), and it’s level 6 right now.
Why gamify a website
Building a site with an AI, there’s one nagging problem: nothing leaves a visible trace. Whatever gets built is buried in git history, and only I can see it. I wanted to turn the work itself into visible growth — clearing quests and leveling up, like a game.
How to build it
The instruction was one sentence:
“Turn this site itself into an RPG character. Every time a piece of work is finished, log it as a completed quest, award XP, and level up.”
The structure:
- A quest ledger (a JSON file) — each task appends a line:
{ date, type, title, description, xp }. The AI writes its own entry every time it finishes something (with titles like “Hunt: the Fake Data Monster”) - An XP table — different task types award different XP (new feature = big, bug fix = small). One file holds the logic that turns cumulative XP into a level and a title
- A status window + a log page — the home page shows the current level and title; the Quest Log page holds the full adventure record
The key is baking the “task → ledger entry” step into a habit. That’s what makes the character grow every time you touch the site.
Level-up rewards — the fun part
Numbers going up isn’t enough on its own. So each level-up unlocks a new visual on the home page:
- Lv.5 — glowing particles start drifting across the page
- Lv.6 — a softly breathing glow
- Lv.7 rune engravings · Lv.8 an aurora · Lv.10 a starry sky (still dormant)
Now there’s a reason to keep feeding it XP — “what unlocks at the next level?” keeps pulling you back to build more.
Everything else that got added (briefly)
A bunch of other things landed on the home page the same day. The next post covers them in detail; here’s the list:
- A living dashboard: market tickers (Nasdaq, S&P 500, Bitcoin / KOSPI, USD-KRW), AI market briefings, the CNN Fear & Greed Index, a New York–Seoul clock, search bars, a sticky note
- An ambient system: the site’s mood shifts with the visitor’s local weather and time (raindrops when it rains, the moon phase at night)
- Search engine registration: generated sitemap + robots.txt, registered with Google Search Console and Naver
- There were bugs too — Yahoo sent a +6% phantom spike in KOSPI data that broke the chart (fixed with a filter), and Naver’s ownership check returned a 404 (the verification method was set to “HTML file upload”; switching the radio button fixed it)
The result
- ✅ 23 quests completed, level 6, two visuals unlocked
- ✅ Cost $0, lines of code I wrote zero
The real payoff of gamification is something else: the “should I build this?” hesitation disappears. An idea shows up, I just say it; if it flops, delete it — and even that becomes a quest entry. So you end up trying everything.