All elements have an experiment animation such as a flame test, radioactivity or alkaline water explosion. The first two rows have real world pictures related to the elements, which take a bit to find and describe. I don't have any background in chemistry but have hopefully avoided basic mistakes.
I tried to keep the text educational but accessible - I imagine the target audience being kids like my own, or a younger me. Curious learners but young, so the text occasionally i.e. mentions nutrition or clarifies what "synthetic" means.
On the technical side, I have minimal Web experience and don't find the visual/UI side of development very fun so I wanted to build this without any JS frameworks or extensive use of JS. The backend is written in Go and the frontend interactivity is mostly done with HTMX and unsophisticated JS. The experiment visualizations for elements like lead and quicksilver are SVG shapes to which simple animation steps are applied.
Would love to hear any thoughts on the general approach, the element visualizations and any other points from HN readers. In particular I would welcome ideas about the transuranium elements, I have essentially the same Geiger visualization for many, and a silly particle beam collision for others because I wasn't able to come across any accessible differences between these elements.
