← Back
|
Hobby Project
Critterpedia
A fan-built critter tracker for Animal Crossing: New Horizons — because the game didn't ship the tool I actually needed.
A fan-built critter tracker for Animal Crossing: New Horizons — because the game didn't ship the tool I actually needed.
Critterpedia is a personal hobby project I built to scratch an itch I had as an Animal Crossing: New Horizons player. The in-game Critterpedia tracks what you've caught — but it can't answer the one question I kept asking mid-session: what can I catch right now that I still need to donate?
So I built the tool myself. It covers all 200 critters — 80 fish, 80 bugs, and 40 sea creatures — with real-time filtering by type, month, hemisphere, and catch status, plus individual artwork for every entry. It's live on Netlify and I still use it.
Animal Crossing: New Horizons has 200 critters to catch and donate to your island museum. Each one is only available during specific months, times of day, and in different hemispheres. The in-game Critterpedia tracks what you've caught, but gives you no way to filter or cross-reference.
The question the game can't answer: "What can I catch right now, in my hemisphere, this month, that I haven't donated yet?" — answering it requires holding four variables in your head simultaneously while flipping between menu screens.
External wikis exist but they're dense, ad-heavy reference pages — not tools. I wanted something that felt native to the game: quick, warm, and pleasant to use during a session.
The key design decision: lean into ACNH's visual language rather than building a generic utility app. The game has a distinct palette and personality — warm creams, earthy browns, leafy greens, and the rounded feel of its fictional NookPhone device. The tracker should feel like it belongs in that world.
I used the game's actual color palette as the design system foundation:
The layout uses a centered card frame styled as a NookPhone — rounded corners, warm white background, a sticky green header, and a progress bar always visible at the top. Nunito was the font choice: rounded, friendly, and heavy enough to feel game-adjacent without being cartoonish. All defined as CSS custom properties for consistency.
Constraint as creative direction: Because I built in vanilla HTML/CSS/JS with no framework, every detail — every gradient, shadow, rounded pill — had to be written explicitly. That constraint made the design more intentional, not less.
Fish, Bugs, Sea Creatures, or all — with live counts per tab
See only what's catchable in a given month, or leave on "All months"
North/South switch — seasons are 6 months offset, remapping the full dataset
Instant name search across all active filters simultaneously
Click any critter: uncaught → caught → 🦉 donated. Persists via localStorage
Live counter (X / 200) with animated gradient bar
Individual in-game icon for every critter, resolved from a name-keyed map
Bell value, location, shadow size, and time availability per card
Vanilla HTML, CSS, and JS — kept the project fast to iterate, free to host, and educational. Every filter, state update, and DOM manipulation is hand-written, which means I actually understand each piece.
Sourcing and structuring accurate availability data for 200 critters — months, times, locations, shadow sizes, prices, hemisphere variants — was the most time-consuming work. Getting the schema right early made all the filter logic clean downstream.
Southern hemisphere availability is exactly 6 months offset from Northern. A single shiftMonths() function remaps any availability array on the fly when you toggle hemispheres. Year-round critters are handled as a special case.
No login, no database, no server. Catch status is stored in localStorage, keyed by critter name. Progress persists across sessions on the same device — zero infrastructure required.
This is a hobby project and I'm presenting it as one — but it shows things client work sometimes can't:
The instinct to build when something is missing shows up across my work — the Skills Assessment Tool, the Survivor game, this tracker. When I hit friction, my first move is to understand the problem well enough to design my way out of it.