2026
Harry Potter Spellbook
A fan-made grimoire of ninety-two spells, with a wand you can actually practise the gestures on.
Stack
Next.js · Canvas · Tailwind
Type
Personal Project
Year
2026
A reference for ninety-two spells that didn't want to stay a reference. Alongside the incantations and effects, each spell has a wand gesture you can practise, scored against the movement it expects.
Overview
It began as a straightforward reference — ninety-two spells, their incantations, and what each one does. That part is a data problem, and it was finished quickly.
The interesting half is the practice mode. Every spell carries a wand gesture, and the app scores how closely you trace it, which turns a lookup table into something you interact with. The night sky, the ambient score, and the spell effects exist to make that feel like the right setting for it rather than a form with a canvas in it.
What I built
- Modelled ninety-two spells as structured data — incantation, effect, and the gesture each one expects
- Built the gesture practice overlay, scoring a traced wand movement against the target path
- Wrote the per-spell effect layer so casting resolves into something visible
- Added the ambient score and animated night sky that set the scene without stealing from it
Scoring a gesture is a fuzzy problem
Nobody traces the same path twice, so comparing a drawn stroke to a target can't be a coordinate-by-coordinate diff — that fails everyone. The scoring has to tolerate scale, position and speed while still catching a genuinely wrong shape, which is the whole difficulty of the feature and the reason it's the part worth talking about.
Atmosphere on a budget
A night sky and an ambient score are easy to do expensively. Both are built to sit underneath the actual content without competing for frames — the sky is generated rather than a video, and the score is opt-in, because unprompted audio is a good way to get a tab closed.
Clearly fan-made
It labels itself a fan-made grimoire in the footer, uses none of the films' assets, and takes its visual language from parchment and gold rather than from anyone's brand. Worth being deliberate about on a project built around someone else's world.