PROJECT
SN2 reaction-coordinate playground
A small interactive explainer for the classic backside-attack substitution reaction.
Overview
An interactive home-page experiment built around one of organic chemistry’s most familiar mechanisms: an SN2 substitution. It makes the reaction coordinate scrubbable, then adds a small amount of character because leaving groups are allowed to have feelings too.
What it shows
- A draggable reaction coordinate and a play-through control
- Hydroxide approaching CH₃Br from the backside
- Simultaneous C–O formation and C–Br cleavage
- A compact energy profile with the transition state marked in context
Why this format
Reaction mechanisms are often presented as arrows on a page. Here, the coordinate ties the arrow-pushing picture to the idea of a concerted energy landscape and Walden inversion. It is not a molecular-dynamics result; it is a deliberately simple visual explanation of the mechanism.
Implementation notes
The playground is drawn with the browser Canvas API, so it has no runtime dependency and remains compatible with a standard GitHub Pages deployment. The slider controls a single normalized reaction coordinate rather than pretending to calculate a reaction trajectory in the browser. Accuracy first; the smiling atoms are merely moral support.
Next steps
- Extend the diagram with a simple stereochemical before/after view.
- Add an optional model comparing SN1 and SN2 energy profiles.
- Link the mechanism to a full note with references and derivations.