Show HN: One hundred LLMs Generating a HTML/CSS Solar System

Solar System Animation showcase | AI BENCHY

AI BENCHY

Language:

🇸🇦 Arabic 🇧🇩 Bangla 🇩🇪 German 🇺🇸 English 🇪🇸 Spanish 🇫🇷 French 🇮🇳 Hindi 🇮🇩 Indonesian 🇯🇵 Japanese 🇮🇳 Marathi 🇳🇱 Dutch 🇵🇹 Portuguese 🇷🇴 Romanian 🇷🇺 Russian 🇰🇪 Swahili 🇵🇰 Urdu 🇨🇳 Chinese

Theme

❤️ Made by XCS

Navigate

Language

Theme

❤️ Made by XCS

Advertise here

Track all your projects in one dashboard. Self-hosted web analytics! Get 📊stats , 🔥heatmaps and 👀recordings in one self-hosted dashboard. See where visitors come from and why they don't convert. Get 📊stats , 🔥heatmaps and session recordings in your own, self-hosted dashboard!

uxwizz.com

Generation showcase

Hamster playing table tennis Solar System Animation

Showcase task

Solar System Animation

Prompt: Create a single-file HTML/CSS animation of the Solar System against a dark background, using no JavaScript or external images. The output must feature a stationary Sun and all 8 primary planets (Mercury through Neptune) orbiting it continuously in the correct order using infinite CSS loops. Also include the Moon orbiting Earth and add labels to the planets. The design must be scalable and optimized for a 1:1 aspect ratio by default.

Models tested: 129

Total cost: $2.81

Total time: 3h 19m

Filters

129/129

Status

All statuses Ready Invalid Unavailable

Sort by

Ranking Cost Time Tokens Model name

Hide invalid

Model outputs

Shown: 20 Total: 129 Valid: 103 Invalid: 26

#1 Gemini 3.5 Flash

high

Interactive 3D-Effect Solar System :root { --mercury-size: 1.4vmin; --venus-size: 2.2vmin; --earth-size: 2.4vmin; --mars-size: 1.8vmin; --jupiter-size: 4.8vmin; --saturn-size: 4.0vmin; --uranus-size: 3.0vmin; --neptune-size: 2.8vmin; --mercury-orbit: 15vmin; --venus-orbit: 23vmin; --earth-orbit: 33vmin; --mars-orbit: 43vmin; --jupiter-orbit: 56vmin; --saturn-orbit: 70vmin; --uranus-orbit: 82vmin; --neptune-orbit: 92vmin; --mercury-speed: 4s; --venus-speed: 8s; --earth-speed: 12s; --mars-speed: 18s; --jupiter-speed: 30s; --saturn-speed: 45s; --uranus-speed: 65s; --neptune-speed: 90s; } body { margin: 0; padding: 0; background-color: #020205; background-image: radial-gradient(circle at center, #080b11 0%, #040508 60%, #010103 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; color: #ffffff; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .stars-layer-1 { position: absolute; width: 0.25vmin; height: 0.25vmin; background: #ffffff; border-radius: 50%; box-shadow: 12vmin 15vmin 0 0.02vmin rgba(255,255,255,0.8), 28vmin 82vmin 0 0.01vmin rgba(255,255,255,0.5), 82vmin 18vmin 0 0.03vmin rgba(255,255,255,0.9), 93vmin 88vmin 0 0.01vmin rgba(255,255,255,0.4), 6vmin 52vmin 0 0.02vmin rgba(255,255,255,0.7), 51vmin 9vmin 0 0.04vmin rgba(255,255,255,0.8), 44vmin 94vmin 0 0.01vmin rgba(255,255,255,0.6), 76vmin 67vmin 0 0.02vmin rgba(255,255,255,0.5), 14vmin 72vmin 0 0.03vmin rgba(255,255,255,0.8), 63vmin 32vmin 0 0.01vmin rgba(255,255,255,0.3), 32vmin 27vmin 0 0.04vmin rgba(255,255,255,0.9), 79vmin 91vmin 0 0.01vmin rgba(255,255,255,0.6), 91vmin 46vmin 0 0.03vmin rgba(255,255,255,0.7), 37vmin 62vmin 0 0.02vmin rgba(255,255,255,0.5), 61vmin 79vmin 0 0.04vmin rgba(255,255,255,0.8), 22vmin 42vmin 0 0.01vmin rgba(255,255,255,0.4), 84vmin 36vmin 0 0.02vmin rgba(255,255,255,0.6), 53vmin 54vmin 0 0.01vmin rgba(255,255,255,0.3); pointer-events: none; } .stars-layer-2 { position: absolute; width: 0.35vmin; height: 0.35vmin; background: #ffffff; border-radius: 50%; box-shadow: 9vmin 24vmin 0 0px rgba(255,255,255,0.9), 34vmin 86vmin 0 0px rgba(255,255,255,0.7), 74vmin 14vmin 0 0px rgba(255,255,255,0.8), 86vmin 74vmin 0 0px rgba(255,255,255,0.6), 19vmin 56vmin 0 0px rgba(255,255,255,0.5), 56vmin 19vmin 0 0px rgba(255,255,255,0.9), 46vmin 84vmin 0 0px rgba(255,255,255,0.4), 84vmin 46vmin 0 0px rgba(255,255,255,0.7); animation: twinkle 4s infinite ease-in-out; pointer-events: none; } @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .header { position: absolute; top: 4vmin; left: 4vmin; z-index: 100; pointer-events: none; } .header h1 { margin: 0; font-size: 2.8vmin; font-weight: 300; letter-spacing: 0.6vmin; color: #ffffff; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .header p { margin: 0.6vmin 0 0 0; font-size: 1.1vmin; letter-spacing: 0.2vmin; color: #5f7586; text-transform: uppercase; } .info-panel { position: absolute; bottom: 4vmin; left: 4vmin; z-index: 100; pointer-events: none; font-size: 1.1vmin; color: #4a5a67; letter-spacing: 0.1vmin; } .info-panel span { color: #3498db; } .legend { position: absolute; top: 4vmin; right: 4vmin; z-index: 100; pointer-events: none; text-align: right;...

Show HN: One hundred LLMs Generating a HTML/CSS Solar System

Related Articles

Apple WWDC 2026 Livestream

Claude Fable 5

US Government directive to suspend access to Fable 5 and Mythos 5

German ruling declares Google liable for false answers in AI Overviews

Britain Became as Poor as Mississippi