What I Built
This is Museum of Tools, my submission for the Dev.to CSS Art Challenge.
It’s a full-screen interactive CSS exhibition built entirely in HTML and CSS (plus a sprinkle of JS for interactivity). I designed it as a tribute to National Tool Day—June 24—a day that slips quietly by for most people but to me felt like the perfect opportunity to explore something deeper: our relationship with the objects that built our world.
Think of it less as a website, and more like a walk-through installation. Each tool in the exhibit—fire, wheel, lever, knife, and printing press—is crafted entirely with CSS. No images, no canvas, no WebGL. Just CSS. (Andd maybe some html and javascript for structure and spice...)
I went hard on the visual polish. Hover animations. Custom scrollbars. Particle effects. Lighting. Shadows. Blurs. 3D transforms. Even a dynamic historical timeline and popups with detailed writeups for each tool. I wanted this to feel real. I wanted someone to get lost in it the way you'd get lost at an actual exhibit in a quiet museum with the lights low and the air humming with reverence.
Demo
👉 View the live project
💻 View source code on GitHub
See the Pen Tool Day- Dev.to submission by aeon flexx (dead girl) (@aeon-flexx-dead-girl) on CodePen.
Journey
I started this project with one image in my mind: a glowing CSS flame in the center of a dark room, flickering like it was real.
That became my first tool exhibit—fire. Once I figured out how to animate layered gradients and shapes into flame, I knew I had something I could build on.
The wheel came next. Then the lever. Then the knife. Then the printing press, which was a beast. Each exhibit pushed my CSS muscles further. I ended up using a lot of transform-style: preserve-3d, complex gradient layering, and tricked-out shadows to make things feel deep and textured.
There were so many little details that took hours. Like animating the sparks around the fire. Or building the printing press arm to swing just right. I spent half a day just adjusting easing curves on the lever animation. But that’s what I love about this kind of work. It’s not “efficient,” but it feels good to make.
Along the way, I fell into this mindset where the tools started to feel sacred. Not in a cliché way. I mean like deeply human. These aren’t just objects. They’re extensions of us. Fire isn’t just fire. It’s survival. The wheel isn’t just a circle. It’s movement. The knife is preparation. The lever is power. The press is knowledge.
I wrote educational popups for each one with historical facts, but I wanted it all to feel like more than facts. I wanted it to feel like memory. Like myth.
What I learned? CSS is way more powerful than I gave it credit for. You can create entire visual worlds if you're stubborn enough. I also learned how much I love making interactive historical stuff. I might actually turn this into a whole series—“CSS Histories” or something.
Next Steps
If people like this, I want to add more tools. Maybe pliers, the compass, maybe the gear or pulley system. I’d also like to work on accessibility—making sure screen readers and keyboard nav flow properly. The codebase could use refactoring, too. I’ll admit I went full mad scientist mode while building.
Also thinking about turning this into a component library of animated educational tools. Maybe a JS module or even a CSS-only gallery plugin teachers or museums could embed.
If you’re reading this and you think that sounds cool, hit me up. I’d love to collab or hear feedback.
Thanks for Reading
Thanks to the Dev.to team for running challenges like this. It’s rare to see CSS art celebrated and pushed like this. These kinds of prompts pull something weird and beautiful out of people. I love it.
And happy Tool Day, belated or otherwise.
We wouldn’t be here without the things we built with our hands.
— Splicer
Top comments (0)