Skip to content

Component 012Navigation

Periodic Explorer

The periodic table moves into a sphere, a helix, or a three-dimensional grid, with colorful element cards and details.

  • React
  • Tailwind CSS
  • TypeScript
Change layouts, rotate the scene, and select an element to inspect it.
Loading preview…
Live interactive preview

Quick start

Make it yours.

Save periodic-explorer.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx
import PeriodicExplorer from "@/components/ui/periodic-explorer";

export default function Example() {
  return <PeriodicExplorer />;
}

Behind the interaction

The details that make it work.

Designed to explore, ready to adapt.

Four ways to explore

Transition between the table, sphere, helix, and grid layouts.

Elements in focus

Select an element to inspect its identifying information.

A reusable 3D scene

CSS transforms create spatial movement without an extra rendering dependency.

Keep exploring

More from the lab.

View all components
Navigation / 052

Globe Travel Explorer

A luminous rotating Earth opens China’s destinations, then zooms into a scenic travel hero with a live booking form.

Navigation / 030

Neumorphic Navbar

A soft gray navigation bar combines raised surfaces, an inset link track, a sliding active highlight, and a rounded mobile menu.