The Vaquita is the world’s most endangered marine mammal, with fewer than 10 individuals remaining. For this project, I set out to create an interactive, scroll-based narrative that educates users about the crisis in a way that feels engaging, emotional, and accessible.​ Unlike traditional static awareness pages, this project uses animation, movement, and a story-driven flow to immerse users in the urgency of the Vaquita’s situation.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

​

Process

To create a smooth and cohesive visual flow, I broke the narrative into sequential segments that activate as the user scrolls. Each section is powered by JavaScript scroll triggers, ensuring the pacing of the story feels intentional and controlled. All copy and animation behavior were stored in a JSON object, which made it easier to update text, adjust transitions, and keep logic separate from visual styling. This structure also helped reduce repetitive code and allowed for quicker testing and iteration throughout development.

​

The interactive site was built using HTML, CSS, and JavaScript as the foundation, supported by MAMP for live browser testing. Gemini played a key role in helping troubleshoot logic problems, refine animation flow, and streamline interactions during development. I hosted the final project on GitHub Pages for accessible public deployment. Every transition, fade effect, and layered movement in the experience was coded manually with a focus on maintaining clarity and performance.

​

Wireframes

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Final Work

The completed prototype includes:

• A fully coded, scroll-driven interactive storyline.

• JSON-structured content for efficient editing.

• A minimal, atmospheric design centered on the Vaquita.

• Browser-based functionality suitable for NGOs, educators, or awareness campaigns.

• Lightweight code that performs smoothly without additional libraries.

 

The site demonstrates how even small, simple interactions can create a deeper emotional impact when paired with meaningful environmental storytelling.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Impact​​

This project showcases how interactive digital storytelling can elevate conservation messaging beyond static facts. Rather than relying on fear or shock imagery, the experience uses motion, pacing, and narrative design to build empathy and understanding.

​

It highlights:

• The potential of lightweight web prototypes in awareness campaigns.

• How interactivity can help users absorb information more meaningfully.

• A flexible structure that NGOs could integrate directly into their platforms.

 

The Vaquita website serves as both an educational tool and a demonstration of how narrative-driven design can be applied to environmental advocacy.

​

Contributing Creatives

• Vaquita illustrated by Creazilla

• Totoaba illustrated by Aqua