DevConnectDevConnect
Sign up · Log in
← back to the feed
1

Renaissance Theme Toggle

I turned the "Creation of Adam" into a theme toggle. Most theme toggles are boring. A simple sun. A simple moon. I wanted to use mine to express something. So I built an animation where hands reach out and pull apart to switch between light and dark. The technical challenge: How do you overlay a Renaissance painting on a UI without completely covering the screen? I used HTML5 Canvas and a dithering algorithm to turns the hands into a pixelated, transparent mesh allowing the background image to bleed through perfectly. Is it practical for a SaaS product? No. The animation takes ~1.35s. Is it perfect for a portfolio? Absolutely. Michelangelo’s painting has always resonated with me. The idea that divine help is always there you just have to reach out your finger. That’s how I view web dev. It’s not just logic, it's artistic expression. One tiny tap, met with an elegant response from the UI. What’s the most creative micro-interaction you’ve seen on the web?
0:00 / 0:00
Add a comment
0/2000