Canopy Atlanta - Interactive Map

As part of a full site redesign for Canopy Atlanta, I created this animated, interactive map to spotlight the cities this incredible nonprofit is actively working in.

We turned a static design into a dynamic, user-led discovery.

Canopy tells the stories of underrepresented voices in Atlanta’s communities, and I wanted this component to feel just as thoughtful as the people behind it.

  • On page load, the map elements float in to create a soft, intentional reveal ✨

  • Hover over each dot and you’ll see the city name pop up, letting users explore organically 🖱️

  • Designed to feel thoughtful, with just enough movement to guide the journey 💭

🎨 Tools: Figma & Webflow

🎯 Focus: Motion design, interaction design, UX storytelling

🧠 Goal: Make the mission feel real, local, and discoverable

Curious how I brought it all together?

🔗 See the full case study and more work on my website.

More by Brooklyn Valera

View profile