Witch Hat Atelier Spell Simulator

A fan-made browser-based spell drawing simulator inspired by Witch Hat Atelier.

<div align="center"> <img src="./assets/demo.gif" width="720"/> <p>Try here: <a href="https://ytnrvdf.github.io/wha-spell-simulator">https://ytnrvdf.github.io/wha-spell-simulator</a></p> </div>

Fan Project Notice

This is an unofficial fan-made project for learning, experimentation, and appreciation. It is not affiliated with, endorsed by, or sponsored by the official creators, publishers, licensors, or production partners of Witch Hat Atelier.

Witch Hat Atelier and related names, artwork, symbols, and trademarks belong to their respective rights holders. The sigils, signs, spell terminology, and visual effects in this project are partial fan references and interactive interpretations, not official assets or canonical rules.

What It Does

The app turns a freehand spell diagram into parser output, compiled spell behavior, and animated canvas effects.

• Lets you draw spell diagrams on a paper-like canvas.
• Detects one enclosing ring and distinguishes prepared versus active spells.
• Recognizes dictionary-backed primary sigils for fire, water, wind, earth, and light.
• Recognizes signs that modify direction, levitation, convergence, force, spread, focus, range, duration, and stability.
• Produces parser diagnostics, GlyphAST, and SpellIR output for inspection.
• Renders animated element effects from the compiled spell behavior.
• Shows sample spell layouts in the Dictionary panel as drawing references.
• Includes reference tools for making, viewing, and testing stroke templates, plus a spell effect lab for visual and animation tuning.

Current Limitations

• The app supports one enclosing spell ring at a time. Multiple rings are detected as unsupported.
• The current compiler expects one primary sigil. Multiple primary sigils are detected as unsupported.
• Recognition is based on local stroke templates, so it works best with clean, deliberate drawings.
• The recognizer is not perfect. Some valid-looking drawings may fail to match, and some rough drawings may need to be redrawn more clearly.
• The dictionaries only cover a small fan-made subset of sigils, signs, and observed spell ideas.
• The visual effects are interpretive canvas animations, not a faithful reproduction of manga or anime effects.
• Raster images can be used as visual references, but the app cannot recover true stroke order from an image.
• Closed but invalid diagrams may show diagnostics, but they do not fall back to another element.
• This is a browser prototype, not a production drawing engine or general symbol recognizer.

Run Locally

Install dependencies:

shCopy
npm install

Start the Vite dev server:

shCopy
npm start

Then open:

txtCopy
http://127.0.0.1:5173/

Reference Tools

These tools are available from the app:

txtCopy
/tools/strokeTemplateMaker.html
/tools/strokeTemplateViewer.html
/tools/sigilSignDetectorLab.html
/tools/spellEffectLab.html

Tests

Run the Node test suite:

shCopy
npm test

Documentation

• Dictionary authoring
• Parser and spell semantics rules
• Parsed glyph output contract
• Compiled spell output contract
• Visual effect renderer notes