https://dev.to/_boweii/juneteenth-freedom-clock-a-css-art-celebration-325e

Cover image for Juneteenth Freedom Clock - A CSS Art Celebration

Posted on Jun 10

93221

Juneteenth Freedom Clock – A CSS Art Celebration

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

AWSPromoted

Streaming live from AWS re:Inforce

Tune into Security LIVE! at re:Inforce for expert takes on modern security challenges.

Learn MoreRead More

Top comments (15)

Ansell Maximilian•Jun 11 • Edited

Awesome2Like

Tombri Bowei•Jun 12

Appreciate it, Ansell!1Like

Nevo David•Jun 11

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

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. 💫1Like

Sarah Matta•Jun 11 • 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.1Like

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 passes1Like

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.1Like

Jamey•Jun 10

Nice posting! Can we talk?1Like

Tombri Bowei•Jun 11

Sure man 👍🏻1Like

Jamey•Jun 11

My email: jeanwork.fit@gmail.com
Could you send me your email address?1Like

Anjelica_MF•Jun 11

YOU DID THAT!!!! Beautiful work done! I’ve never clicked on a repo so fast.1Like

Tombri Bowei•Jun 12

Haha, You just made my day, Anjelica! So glad you liked it—thank you!!2Like

nadeem zia•Jun 12

Amazing, nice work1Like

Daned Sandar•Jun 11

Good post1Like

Tombri Bowei•Jun 12

Thanks, Daned!2Like

View full discussion (15 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.Code of Conduct • Report abuse

AWSPromoted

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Tombri BoweiFollow

🤖 I don’t always write bugs… But when I do, they’re creative. 💡 18 | Self-taught dev | Building things that break (then fixing them) 🚀 Mobile, Web,AI, and open-source:| Let’s nerd out over tech!

LocationLondon, United Kingdom
EducationBSc IT @ Middlesex | SWE Diploma @ Aptech | Forever Self-Taught
PronounsHe/Him
WorkSoftware Engineer (Full-Stack) | Mobile @ Octiflex | Freelance | Tech Creator
JoinedJul 8, 2024