When Shadows Ruled !!

A symbolic journey through the darkest chapter of modern history

Comment

Inspiration

We were inspired by the symbolism, scale, and emotional weight of World War II — a conflict that shaped modern civilization. Instead of building just a historical timeline, we wanted to create a symbolic, emotional journey that honors the resistance to tyranny, the tragedy of unchecked power, and the triumph of peace.

What it does

When Shadows Ruled is an interactive, scroll-based website that symbolically tells the story of WWII through four stages:

The Rise of Darkness (Nazi Germany)

Eastern Expansion & Fire (Imperial Japan)

The Global Collapse (bombings, Holocaust, destruction)

Rebirth and Peace (resistance, victory, unity)

It uses animated transitions, historical metaphors, ambient sound, and symbolic visuals to make the user feel the emotional arc from chaos to resolution.

How we built it

We used: HTML, CSS, JavaScript for the full site

Challenges we ran into

Balancing sensitivity with creativity — Representing Hitler and Imperial Japan without being offensive required care and historical grounding.

Complex scroll animations — Coordinating animations with emotional beats took a lot of iteration.

Making it immersive without overwhelming — We had to carefully balance tone and visuals to avoid fatigue

Accomplishments that we're proud of

Created a history-based experience that feels artistic and educational, not just informational

Successfully told a symbolic story with no narration or text-heavy content

Built a technically smooth, emotionally powerful website in limited time

What we learned

How to emotionally engage users through symbolism and minimalism

Deepened understanding of WWII’s global context and ethical storytelling

Mastered advanced scroll-triggered animation and state transitions

What's next for When Shadows Ruled !!

Add narration options for accessibility and historical context

Translate into multiple languages for global audiences

Collaborate with educators or museums to turn it into an interactive learning tool

Host it on a public domain and open-source it for awareness and contribution

Built With

Share this project:

Updates