sonnyplot.com
⚔️

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:

  1. 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”)
  2. 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
  3. 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.

← Back to the log