I built a pixel museum for my anime merch — and made you gamble to see it

This is a submission for Weekend Challenge: Passion Edition.

What I Built

Museum of My Obsession is a tiny pixel-art museum for three things I love beyond reason: a Hiten illustration artbook, an Arcueid Brunestud body pillow, and a Mélusine 1/7 scale figure.

But you do not simply browse my collection. That would be too easy, and nothing about collecting is ever quite that easy. You summon it.

The museum has a gacha pool where those three treasures are the only SSRs. The rest of the pool contains the true everyday relics of a collector's life: a shipping cardboard box, a silica gel packet, an instruction manual, and an empty wallet — “the true cost of passion.” There is a hard pity at 10 pulls, a ten-pull flip-card grid, summon history, unlockable curator titles, and a DEX that tracks both silhouettes and the current pity count. Collect all three SSRs and a secret final exhibit appears: The Curator — me, the most obsessed item in the building.

The whole museum begins in pixel art. When an SSR is revealed, its pixels dissolve tile by tile into a full illustration on a quiet ivory gallery wall, beside a first-person curator's note and a museum-style obsession stats plate.

That transition is the point:

To everyone else, this is pixels. To me, it renders in HD.

Someone else may see paper, fabric, or plastic. I see the anticipation before a package arrives, the memory attached to a shelf, and the strange clarity that passion gives an ordinary object.

Demo

🏛️ Enter the live museum

For the intended 60-second experience, turn the sound on and follow this route:

SUMMON ×10 → click or tap the rainbow SSR → watch pixels become HD → leave a flower → visit DEX

The ten-pull guarantees that there is an SSR to discover. The rainbow card is the doorway to the site's signature pixel-to-HD reveal.

If you leave a flower at an exhibit, the museum remembers it locally in your browser. There is no account, backend, analytics service, or external API watching the visit.

Code

aierkuite / museum-of-my-obsession

Museum of My Obsession

A tiny pixel-art museum for the things I love — built for the dev.to Weekend Challenge (Passion Edition, July 2026).

Summon an exhibit from the summon circle, watch the rarity stars light up, and step into the appreciation room to read the curator's notes. There's a gacha with a pity system, a ×10 summon, a collection dex, and a secret exhibit for those who collect every SSR.

🏛️ Live museum: https://aierkuite.github.io/museum-of-my-obsession/

The 60-second route

SUMMON ×10 → tap the rainbow SSR → watch pixels become HD → leave a flower → visit DEX

Short on time? Use QUICK TOUR for a state-safe signature reveal that never changes your real pity, summon history, collection progress, titles, or flower counts.

How it works

• Vite + vanilla JavaScript + CSS, with hash-routed views and no backend
• Original SVG sprites for the pixel museum and original HD exhibit art
• …

View on GitHub

How I Built It

I gave myself one rule for the weekend: everything visual had to be original. The site uses no official artwork, game screenshots, scans, or product photography. Every pixel sprite and HD illustration is a hand-authored SVG interpretation. Character and creator names appear only in the prose; the visuals deliberately avoid copying official designs.

The stack is Vite + vanilla JavaScript + CSS, with one small runtime dependency: canvas-confetti for an SSR celebration. There is no framework and no backend. The pixel font is hosted locally, and every sound is synthesized at runtime with the Web Audio API, including an original eight-bar chiptune loop scheduled with an absolute-time lookahead so it can repeat without a gap.

Some implementation details I especially enjoyed:

• The gacha engine is a pure logic module with injectable random-number generation and storage. It uses weighted tiers, hard pity at 10, ten-pull safeguards, duplicate SSR handling, summon history, and local DEX progression.
• The summon ceremony is a canvas particle system. Roughly 190 additive-glow particles spiral into a tilted rotating ring, contract, and collapse into a flash. Blue, gold, and rainbow lighting reveal the tier before the card appears.
• The pixel-to-HD dissolve uses a randomized 12 × 9 mosaic grid. It is a small effect, but it carries the emotional thesis of the entire project.
• The collection is local-first. Pity, history, DEX progress, titles, and flowers live in localStorage; none of them leave the visitor's browser.
• Motion is optional. Particles, mosaic reveal, confetti, typewriter text, and parallax all respect prefers-reduced-motion, and the layout remains usable at a 375 px viewport.

The Data Behind the Displays

The stats plates are personal context, not accounting records. I intentionally publish honest approximations rather than pretending that years-old purchase memories are exact facts.

• The Hiten artbook cost about CNY 320. I acquired it in 2022, waited roughly 24 days, and its journey covered over 2,000 km. The decision took under 10 minutes.
• The Arcueid body pillow cost about CNY 650. I acquired it in 2023, waited over 60 days, and it travelled over 1,500 km. I thought about it for roughly two days.
• The Mélusine figure cost about CNY 1,400. I acquired it in 2024, waited nearly 300 days, and it travelled over 2,000 km. The decision took about three seconds.

Those fuzzy numbers tell a clearer story than a sterile inventory table: over a year of combined waiting, thousands of kilometres travelled, and a decision-time range from two days to three seconds.

Building With AI

I built this project solo over one weekend with AI-assisted pair programming. AI helped me explore interaction ideas, draft and review code, refine English copy, and test edge cases. I made the product decisions, selected the personal stories and honestly approximate data, reviewed the implementation, and kept every shipped visual asset original to this project. The public repository history is the development diary.

The most useful thing AI did was not “generate a website.” It helped me keep asking whether each technical flourish supported the same emotional idea. Gacha, pity, the DEX, synthesized audio, and the dissolve effect all had to lead back to one line:

To everyone else, this is pixels. To me, it renders in HD.

Regrets: 0.

---

Thanks for visiting. Leave a flower. 🌸