A real-time, interactive visualization of hydrogen atom wavefunctions built as a single self-contained Framer code component.
Renders the probability density |ψₙₗₘ|² of hydrogen eigenstates using a WebGL fragment shader, with smooth 1.2-second morphing transitions between any two quantum states.
9 preset orbitals (1s through 5g) shown as thumbnail previews — click to morph
Parameter steppers for principal quantum number n, azimuthal ℓ, magnetic m, and zoom scale
Live formula display: ψₙ,ₗ,ₘ(r, θ, φ) = Rₙ,ₗ(r) Yₗ,ₘ(θ, φ) updating in real time
Piano audio feedback on every button press, with mute toggle
Reset to ground state (1s)
Tech stack
Raw WebGL (no three.js) — fullscreen quad with a single fragment shader computing associated Laguerre polynomials and real spherical harmonics
Web Audio API — synthesized piano tones (sine partials + percussive decay), no audio files
Zero external dependencies — runs entirely within Framer's react / framer / framer-motion environment
A real-time, interactive visualization of hydrogen atom wavefunctions built as a single self-contained Framer code component.
Renders the probability density |ψₙₗₘ|² of hydrogen eigenstates using a WebGL fragment shader, with smooth 1.2-second morphing transitions between any two quantum states.
9 preset orbitals (1s through 5g) shown as thumbnail previews — click to morph
Parameter steppers for principal quantum number n, azimuthal ℓ, magnetic m, and zoom scale
Live formula display: ψₙ,ₗ,ₘ(r, θ, φ) = Rₙ,ₗ(r) Yₗ,ₘ(θ, φ) updating in real time
Piano audio feedback on every button press, with mute toggle
Reset to ground state (1s)
Tech stack
Raw WebGL (no three.js) — fullscreen quad with a single fragment shader computing associated Laguerre polynomials and real spherical harmonics
Web Audio API — synthesized piano tones (sine partials + percussive decay), no audio files
Zero external dependencies — runs entirely within Framer's react / framer / framer-motion environment
