🎓 What is this?

An educational web application designed to teach the how large language models (LLMs) work.

👉 Try it yourself at animatedllm.github.io

Instead of static diagrams or abstract equations, it provides a dynamic, step-by-step visualizations of the Transformer architecture in action.

The application runs entirely in your browser using pre-computed data.

⌨️ Controls

Navigate the animation using your keyboard:

Key	Action
Space	Play / Pause animation
→ / ←	Step forward / backward
N	Skip to next token
G	Skip to end of generation
R	Reset animation
T	Toggle theme (Light/Dark)
L	Switch language
H	Show shortcuts help

🚀 Running locally

For running the app on your own device, you will need Node.js (version 20.9.0 or higher) and npm installed.

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm run dev
   

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct, and the process for submitting pull requests to us.

📚 Cite Us

If you use AnimatedLLM in your research or teaching, please cite our paper:

@misc{kasner2025animated,
      title={AnimatedLLM: Explaining LLMs with Interactive Visualizations},
      author={Zdeněk Kasner and Ondřej Dušek},
      year={2025},
      eprint={2601.04213},
      archivePrefix={arXiv},
      primaryClass={cs.CL},
      url={https://arxiv.org/abs/2601.04213},
}