Juneteenth Freedom Clock - A CSS Art Celebration

#frontendchallenge #devchallenge #css

This is a submission for Frontend Challenge – June Celebrations, CSS Art: June Celebrations.

Inspiration

This project was built to honour and visually celebrate Juneteenth, a pivotal moment in American history marking the emancipation of the last enslaved African Americans. The goal was to create an interactive and aesthetically pleasing experience that not only serves as a reminder of this significant day but also as a symbol of ongoing progress and the enduring spirit of freedom. Through dynamic animations and thoughtful design, I aimed to capture the essence of liberation and hope, making history accessible and engaging for everyone.

Demo

Experience the Juneteenth Freedom Clock live:

Live Demo: https://juneteenth-freedom-clock.vercel.app/

GitHub Repository: https://github.com/Boweii22/Juneteenth-Freedom-Clock

Journey

The journey of building the Juneteenth Freedom Clock was an exciting exploration into modern web development and creative CSS. Starting with a basic React and TypeScript setup using Vite, the core challenge was to bring a static clock concept to life with intricate animations and a meaningful theme.

A significant part of this process involved crafting the detailed CSS for the various animated elements:

The "Freedom Clock" itself, with its precisely positioned hour and minute markers, required careful calculation and transformation.
Implementing the celestial bodies (sun and moon) involved mastering CSS transform properties for smooth orbital animations and dynamic visibility based on the time.
The sky background, stars, shooting stars, and aurora effects were created entirely with CSS gradients and keyframe animations, aiming for a magical and immersive atmosphere.
Animated typography for "FREEDOM", "Celebrating Juneteenth", and "1865" was achieved using individual letter animations, creating a revealing and impactful effect.
Integrating subtle details like floating clouds, flying birds, and glowing fireflies added layers of visual interest and life to the scene.

Then, the addition of the interactive info modal with its "glassmorphism" effect presented a fun challenge in combining React state management with advanced CSS properties like backdrop-filter to create a modern, transparent UI element.

I'm particularly proud of how the various animations seamlessly integrate to create a cohesive and inspiring visual narrative. It was a rewarding experience to blend technical implementation with a meaningful historical celebration. Next, I hope to explore adding more interactive elements

Top comments (14)

Ansell Maximilian • Jun 11 • Edited

Awesome

Tombri Bowei • Jun 12

Appreciate it, Ansell!

Nevo David • Jun 11

Pretty cool seeing all the detail you put in - I kinda wish more stuff mixed history and art like this.

Tombri Bowei • Jun 12

Thanks so much, Nevo! thats exactly what i was trying to achieve—blending storytelling with visuals - you know history just hits different when it's brought to life. 💫

Sarah Matta • Jun 12 • Edited

This is beautiful work. I liked your showcase of using pure CSS for the sky, stars, and aurora. The details make it feel alive. Honoring Juneteenth through creative coding like this is exactly the kind of work that reminds us tech can be both expressive and deeply human. Well done.

Nathan Tarbert • Jun 11

insane work, feels alive for real tbh, stuff like this always gets me thinking about how people pick what to honor and remember - curious, for you, what makes a moment worth celebrating long after the day passes

Tombri Bowei • Jun 12

Wow, Nathan, thanks for the compliments. thats a deep question. 😅 uhh for me, a moment I want to celebrate is one that changes lives—particularly those of the overlooked—and continues to be an inspiration for progress and . Juneteenth feels exactly that: an embodiment of resilience, proof that the fight for real freedom is never ending.