3D Bohr Atom Model — CSS Animation

3D Bohr Atom Model — CSS Animation

A pure CSS 3D atom simulation featuring a glowing nucleus, five elliptical orbital shells, and 12 electrons distributed across shells. Built with transform-style: preserve-3d, CSS keyframe animations, and layered box-shadow glow effects — no libraries, no JavaScript.

Helpful?

Case trace

2 creative leaps

Step 1 — Initial PromptClaude

Requirements:

  • A central glowing nucleus positioned in the middle.

  • Three elliptical or circular orbits arranged in 3D space using CSS transforms (rotateX, rotateY).

  • Each orbit contains a small glowing electron that revolves smoothly around the nucleus.

  • Use CSS keyframe animations to animate both:

    • the orbit rotation (for subtle motion of the orbit ring)

    • the electron movement (circular revolution using transform: rotate + translate).

  • Apply different rotation angles and animation delays to each orbit for a dynamic, non-uniform effect.

  • Use transform-style: preserve-3d to simulate depth.

  • Add soft glow effects using box-shadow for both nucleus and electrons.

  • Background should be dark to enhance contrast.

  • Keep the code clean, well-structured, and reusable.

  • Use modern CSS (no preprocessors like SCSS unless also compiled to plain CSS). Output:

  • Provide complete HTML and CSS in one file.

  • No external libraries.

  • Animation should loop infinitely and run smoothly.

Step 2 — More orbits and animationClaude

Add more electrons and orbits, also add zoom in zoom out animation to the orbits

Published 3w ago

Jasan H

Jasan H

1 followers

Category

Code

Tools used

Claude

Tags

css animationcreativecodingpure css

More from Jasan H

Liquid Magnetic Button

Liquid Magnetic Button

I want to build a button component in React that behaves like a magnet — when the cursor is within 100px of the button, the button smoothly …

ClaudeReactTailwind
Jasan H
Jasan H
Concrete Laughter

Concrete Laughter

A minimalist film poster featuring a wide expanse of empty, concrete-grey space. At the very bottom of the frame, a single, battered yellow …

ChatGPTPoster
Jasan H
Jasan H
The Weight I Leave

The Weight I Leave

Create a motivational music piece. The target audience is people going through a difficult period, feeling stuck or lost, who need an emoti…

GeminiAlternative R&B
Jasan H
Jasan H

View similar

Animated Envelope

Animated Envelope

Create the HTML structure for an animated envelope component. Use nested divs for the envelope parts: back-fold, letter, top-fold (flap), bo…

CursorHTMLCSS
Tanvir M
Tanvir M
Gravity Ink

Gravity Ink

Build a fully playable Gravity Painter game as a single React component (.jsx) using Matter.js for physics.Tech StackReact with hooks (useSt…

CursorReactTailwind
Oni linn
Oni linn
TypeBreaker

TypeBreaker

Build a fully playable Brick Breaker game in a single HTML/CSS/JS file with the following features:Pre-Game ScreenDisplay a centered input f…

v0
Samir Ali
Samir Ali
Liquid Magnetic Button

Liquid Magnetic Button

I want to build a button component in React that behaves like a magnet — when the cursor is within 100px of the button, the button smoothly …

ClaudeReactTailwind
Jasan H
Jasan H
Smart Typewriter Component

Smart Typewriter Component

Write a React hook useTypewriter(phrases, options) that types each phrase, pauses, backspaces it, then loops. Add ±30% jitter so it does not…

ClaudeReact
Jabid Hasan
Jabid Hasan
Animated Gradient Mesh Hero

Animated Gradient Mesh Hero

Create a full-viewport div with an animated CSS mesh gradient background. Use 4 radial gradients in purple, cyan, rose, and amber. The gradi…

v0ClaudeReact
Jabid Hasan
Jabid Hasan