Hello everyone! I’ve been playing around with AI a bit and found the results amusing, so I decided to share them here.
I just got back from a bike ride and thought, “Hey, can ChatGPT animate a bicycle using CSS art?” In my mind, it seemed like it could work pretty well since a bicycle can be drawn quite simply with two circles and a few lines. Well, since I didn’t want to write the prompts myself, I let ChatGPT generate its own prompts to get the maximum AI overdose.
Here are the results:
Version 1
Prompt:
“Create a simple homepage using HTML, CSS, and JavaScript, featuring a bicycle made entirely with CSS art that moves across the screen.”
Result:
Well, with a bit of imagination and a sprinkle of magic, I can almost see what it was trying to be?
Version 2
Prompt:
“Build a clean and minimal homepage using only CSS art for a bicycle. Use JavaScript to animate the bicycle, making it move smoothly across the screen.”
Result:
I hardly dare to say it, but this is perhaps the best result you will see today.
Version 3
Prompt:
“Design a stylish homepage featuring a CSS-only bicycle that moves across the screen with JavaScript animation. The bicycle should have realistic details, such as spinning wheels and a simple road beneath it for depth.”
Result:
Will this thing take my suitcases to my hotel?
Version 4
Prompt:
“Create a visually appealing CSS art homepage where a bicycle (built entirely with CSS) rides across the screen. Use JavaScript to animate the movement, ensuring the wheels spin and the pedals move naturally. Add a simple animated background, like a scrolling road or clouds, to enhance the effect.”
Result:
I really don’t know what this is.
Version 5
Prompt:
“Develop an interactive homepage featuring a beautifully detailed bicycle created purely with CSS art. Animate the bicycle using JavaScript—making the wheels spin, the pedals rotate, and the background scroll for an immersive effect. Bonus: Allow users to control the bicycle’s speed with keyboard inputs or buttons!”
Result:
At this point, it’s really just a screenshot. There’s nothing there, and nothing moves.
Version 6
Prompt:
“Create a stunning CSS art homepage featuring a highly detailed bicycle, built entirely with pure CSS (no SVGs, no images). The bicycle should have realistic proportions, elegant styling, and smooth animations. Use JavaScript to animate the scene, making the bicycle move across the screen with fluid motion. Ensure that the wheels spin realistically, the pedals rotate naturally, and the entire bike responds dynamically to movement.
Enhance the realism with a scrolling background—such as a road, a city skyline, or a countryside landscape—using CSS and JavaScript to create a parallax effect for depth. The bicycle should cast a soft shadow that adjusts subtly as it moves, adding to the 3D illusion.
For an interactive touch, allow users to control the bicycle’s speed with keyboard inputs (e.g., arrow keys or a slider) and make the animation smooth and responsive. If the user stops pedaling, let the bike gradually slow down instead of stopping abruptly, simulating real physics.
Use CSS tricks like gradients, box shadows, and pseudo-elements to craft a polished and aesthetically pleasing design. Keep the code clean, efficient, and easy to modify, following best practices for maintainability. Make the homepage visually impressive, fun to interact with, and optimized for both desktop and mobile screens.”
Result:
And yes - it’s implemented that I control this bike with my keyboards arrow keys!
Summary
I don’t know, you decide for yourself. Read a tutorial on how to do prompt engineering properly, wait for the next even better AI model, try a different AI than ChatGPT, or whatever.
But no matter what you say about how to improve or do this, one thing is clear: getting the perfect result from an AI with a simple command is still far off. And that’s exactly what I notice again and again in my daily work as a software developer. And at that point, I always start to wonder which tasks are still worth using AI for, and where I might need to invest a bit more brainpower to create my own solution.