add logos to this atom code and switch to using react / framer / tailwind / etc.
<div class="atom"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> </div>- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: radial-gradient(#113, #000);
background: #000
}
.atom {
position: relative;
display: flex;
width: 300px;
height: 300px;
align-items: center;
justify-content: center;
}
.atom:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: transparent;
box-shadow: inset 0 0 10px #fff;
border-radius: 50%;
}
.line {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
}
.line1 {
--color:
#06d6a0; width: 100%; height: 100%; border-radius: 50%; border-bottom: 10px solid var(--color); border-top: 10px solid var(--color); animation: animate1 2s linear infinite; filter:drop-shadow( 0 0 10px var(--color)); } @keyframes animate1 { 0% { transform: rotateY(70deg) rotateZ(0deg); } 100% { transform: rotateY(70deg) rotateZ(360deg); } }
.line2 {
--color: #e63946;
width: 100%;
height: 100%;
border-radius: 50%;
border-right: 10px solid var(--color);
border-left: 10px solid var(--color);
animation: animate2 3s linear infinite;
filter:drop-shadow( 0 0 10px var(--color));
}
@keyframes animate2 {
0% {
transform: rotateX(80deg) rotateY(25deg) rotateZ(0deg);
}
100% {
transform: rotateX(80deg) rotateY(25deg) rotateZ(360deg);
}
}
.line3 {
--color: #fca311;
width: 100%;
height: 100%;
border-radius: 50%;
border-right: 10px solid var(--color);
border-left: 10px solid var(--color);
animation: animate3 3s linear infinite;
filter:drop-shadow( 0 0 10px var(--color));
}
@keyframes animate3 { 0% { transform: rotateX(-80deg) rotateY(25deg) rotateZ(0deg); } 100% { transform: rotateX(-80deg) rotateY(25deg) rotateZ(360deg); } }
Atom Animation with Logos in React, Framer Motion, and Tailwind CSS
I'll convert your atom animation to React using Framer Motion for animations and Tailwind CSS for styling, while adding logos to the orbiting lines.
Key Features
- React & Framer Motion: Replaced CSS animations with Framer Motion for smoother, more maintainable animations
- Tailwind CSS: Converted all CSS to Tailwind utility classes
- Added Logos: Placed logos on each orbital ring that maintain proper orientation
- Maintained Visual Style: Preserved the original colors, glow effects, and animation patterns
Customization Options
- Replace the placeholder logos with your actual company logos
- Adjust the animation speed by changing the
durationvalues in the motion components - Modify the colors by changing the border color classes
- Resize the entire atom by adjusting the height and width values in the parent container
The logos will orbit around the central nucleus while maintaining their orientation, creating an elegant atom-like structure that showcases your brand partnerships or technologies.
make each orbit the same thickness around the entire circumfrence.
use black lines for the atom and a white background
I'll update the atom animation to have consistent orbit thickness around the entire circumference and change the color scheme to black lines on a white background.
Changes Made
Full Circle Orbits:
- Changed the orbit implementation to use full circles with consistent thickness
- Each orbit now has a complete 10px black border around the entire circumference
Color Scheme:
- Changed the background from black to white
- Changed all orbit lines from colored to black
- Removed the glow effects (shadow) since they wouldn't be as visible on white
- Updated the logo background to be slightly transparent black for better contrast
Maintained Animation:
- Preserved all the original 3D rotation animations
- Kept the logo positioning consistent with the original design
The atom now has a cleaner, more minimalist appearance with consistent orbit thickness and a black-on-white color scheme while maintaining the same dynamic movement.
use real logos like the puma one
