Add a stunning, fully interactive 3D Periodic Table to your project without touching a single line of code. Designed with a sleek, dark-premium aesthetic, this component leverages native Framer Motion physics to create smooth, high-performance 3D transitions.
Watch the elements seamlessly transition between four mathematical layouts with fluid, spring-based animations:
Table: The classic periodic grid.
Sphere: A rotating 3D Fibonacci sphere.
Helix: A striking DNA-like spiral.
Grid: A multi-layered 3D matrix.
The component automatically scales its math and 3D positioning to look perfect on Desktop, Tablet, and Mobile devices. Elements react to mouse hover states with premium glassmorphism effects, and clicking an element expands it to reveal detailed atomic data (Mass, Density, Melting, and Boiling points).
Exposed Property Controls let you match the component to your brand instantly:
Background & Text Colors: Easily adapt it to light or dark modes.
Accent Color: Customize the primary glowing hue.
Default Layout: Choose which 3D shape loads first.
Toggle Controls: Show or hide the layout switching menu.
Perfect for educational platforms, tech agencies, portfolio showcases, or anyone looking to add an undeniable "wow" factor to their Framer website. Just drag, drop, and customize.
Eneko Lekue
