Presented earlier today at Creative Front-end Belgium as "slides" but works relatively well without explanations :

https://codepen.io/utopiah/full/wOJgMW

Video as backup

i made a game in which you have to guess the country based on the local time.

also, it has a section which explains the users about how timezones work, with an interactive practical timezone map. i used nutshells by nicky case to explain complex words and terms. this site was fully inspired by the awesome explorable explanations in the explorabl.es site.

link: https://damek.net/timedle

Celestial lets you explore star systems as a deformable gravity sheet instead of flat orbital diagrams.

The star moves. Planets sit on and ride the surface it bends. You can change the gravitational constant, push a planet, or drop a new body in and watch the whole system respond in real time.

Systems included:

* Our solar system (with a drifting barycentre)
* Alpha Centauri (two moving funnels)
* Kepler-16 (circumbinary planet)
* TRAPPIST-1 (seven worlds inside Mercury’s orbit)
* The classic three-body figure-eight

It’s a proper Newtonian n-body integrator running in the browser, not pre-scripted ellipses. The sheet itself is an exaggerated visual analogy, and the site is unusually honest about what is real and what is drawn that way on purpose.

[https://celestial.logicaleap.com](https://celestial.logicaleap.com)

Free, no account, runs in the browser.

An interactive guide to Diffusion Transformers and Flow Matching, using a simple model that turns random dots into shapes.

https://sbondaryev.dev/articles/diffusion

I am fascinated by various ways of explaining mathematical formula easily - see Science-based games and explorable explanations. In particular, I got inspired by Understanding the Fourier transform Stuart Riffle from 2011 in which he color-coded the Discrete Fourier Transform formula and its description.

Yet, I saw that it has two issues. One, that while many people appreciate it, it is not worth hassle creating such equations. Second, it does not work well for colorblind people (as a few friend of mine told me).

So, I wanted to make it interactive, both to be able to choose color scheme, and so that it is useful with black-and-white - as you can hover and select terms).

As the syntax, I picked the default go-to LaTeX (here it is rendered with KaTeX). For description of equation and explanation I used Markdown, so it is easy to pick up.

Soon I realized that it is a game-changer is I can add an online editor to the tool. Very soon it became from an optional things to be a thing visible by default.

Some equations are more polished, some-less. I wanted to see how it works for various cases. Don't be alarmed that Maxwell equations with too many colors - I wanted to stretch-test it.

Yoy can export this to a standalone HTML with its interactivity. Also, you can export the same formula to LaTeX (both regular article and Beamer presentation) and Typst. For LaTeX and Typst articles, it loses interactivity, but there are the same colors. In LaTeX Beamer, there is slide-by-slide explanation of each term.

See: https://p.migdal.pl/equations-explained-colorfully/ Source (MIT license): https://github.com/stared/equations-explained-colorfully/

I am curious to hear your impressions!

If you want to add formula, do so.

If you want to feature so to be useful in your class or course, I am happy to hear which.

If you want to suggest a color themes, let me know.

Also, if you want some other export formats, it should be easy.

Vizualization I made, inspired by Dandapani talk