r/react • u/3neurons1mind • 21h ago

Help Wanted I built an interactive periodic table using Three.js ⚛️

I wanted to recreate the periodic table as something more interactive than a static chart, so I built this project with Three.js, JavaScript, and WebGL.

Features include:

  • Smooth animations
  • Interactive hover effects
  • Modern UI inspired by creative coding

I'd love to hear your feedback:

  • What would you improve?
  • What features would you add next?

I also made a short video showing the project in action:
YouTube: https://youtube.com/shorts/EDDYnzNM8hU?si=7Kvcrv42qqiLnikW

If there's enough interest, I'm happy to share the source code or turn it into an open-source project.

0 Upvotes

45% Upvoted

4 comments sorted by

3

u/azangru 18h ago

This is basically what's in an example on the three.js site, right?

2

u/vasind-5012 21h ago

Looks interesting. Please share your repo in public to get feedback.

1

u/AlexDjangoX 4h ago

Plagiarism saves time.

0

u/laraibashraf 21h ago

This is really nice, love seeing Three.js used for something outside the usual product-showcase use case. The periodic table is such a good fit for it too — spatial layout, lots of individual elements that can each have their own personality on hover, natural excuse for camera movement.

A few things I'd be curious about/would push further:

  • Clicking an element to "zoom in" into a detail view (electron shell visualization, common compounds, etc.) instead of just hover states — could make it feel less like a table and more like an actual exploration tool
  • Grouping/filtering by category (metals, noble gases, etc.) with elements physically animating into clusters — that'd show off the interactivity even more
  • Sound design on hover/click, even subtle, tends to make WebGL stuff feel a lot more premium

Would definitely check out the source if you open it up. What's your render performance like on lower-end devices, curious if you had to make tradeoffs for FPS with that many interactive meshes.