3D Reaction Viewer

Interactive 3D visualization of chemical reactions using React Three Fiber.

Features

• 5 pre-computed reactions: H₂ dissociation, SN2 (CH₃F + Cl⁻), acid deprotonation, ketone reduction, Diels-Alder
• Algorithm selection: UFF, PM3, xTB, GFN1, GFN2, HF-3c
• Playback controls: Play/Pause, speed adjustment, frame slider
• Energy profile: Real-time energy vs. reaction coordinate overlay
• Interactive 3D: Rotate, zoom, and pan with mouse/touch (OrbitControls)
• CPK coloring: Standard atomic colors and covalent radii for ball-and-stick rendering

How It Works

Each reaction is defined by reactant and product molecular geometries. Intermediate frames are generated by interpolating atomic positions along the reaction coordinate, with an energy profile modeling the transition state barrier.

Bond detection uses covalent radii — atoms within 1.3× the sum of their covalent radii are connected. This allows bonds to form and break dynamically during the animation.

Building from Source

cd examples/reaction-viewer
npm install
npm run dev    # development server
npm run build  # production build → docs/public/reaction-viewer/

Technology

• React Three Fiber — React renderer for Three.js
• @react-three/drei — Useful helpers (OrbitControls, Environment, ContactShadows)
• sci-form WASM — Molecular computation engine (future live integration)