3D Periodic Table of the Elements

Traditional periodic tables are 2D and static, making it difficult to visualize how different chemical properties relate across various organizational structures. The challenge was to create an immersive environment where users could switch between different periodic representations without losing their mental map of the elements.

To solve this, I focused on inter-structural continuity.

Dynamic Morphing: Instead of simple page flips, I engineered smooth, interpolated animations that physically move each element's 3D coordinate from one table shape to another.

Spatial Context: This allows users to visually track specific elements during transitions, making the relationship between different chemical "perspectives" intuitive and clear.

Performance: Leveraged React Three Fiber and Three.js to ensure 60FPS transitions even on mobile browsers.

Frontend: TypeScript, React, Next.js

3D Engine: React Three Fiber (R3F), Three.js

Animation: React-spring (for coordinate interpolation)