Skip to main content
CushLabs logo CUSHLABS.AI
Back to Portfolio

BioJalisco Pitch Site

Cinematic scrollytelling site pitching a citizen-science biodiversity platform for western Mexico

Video Walkthrough

Video Walkthrough

Screenshots

1 / 10
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier
BioJalisco — Biodiversity Atlas Pitch Site + Species Identifier

The Challenge

Conservation researchers in western Mexico face an asymmetry: deep scientific expertise but limited reach. Their work covers a fraction of Jalisco's 80,000+ km² territory. BioJalisco proposes closing that gap through citizen science and technology, but the vision needed a compelling presentation to win stakeholders and partners.

The Solution

A persuasion artifact built as a single self-contained HTML file with embedded images, bilingual content switching, procedural audio, and scroll-triggered animations. Demonstrates that high-impact storytelling doesn't require React or a build system.

What It Does Well

  • 5-act narrative arc (Hook → Problem → Vision → Evidence → Ask) designed for stakeholder persuasion
  • Instant ES/EN language switching with zero page reload using CSS visibility toggles
  • Self-contained deployment — entire site is 1.8MB HTML file with base64-embedded WebP images
  • Procedural forest soundscape via Web Audio API (no audio files needed)
  • 92% image size reduction through PNG→WebP conversion + base64 encoding

Highlights

Good for

  • Conservation organizations pitching to academic partners and funders
  • Projects needing offline-capable presentation sites with zero infrastructure
  • Bilingual storytelling where both languages must be equally polished
  • Demonstrating technical restraint — vanilla JS for projects that don't need frameworks

Not a complete solution for

  • Projects requiring dynamic content updates (everything is baked into the HTML)
  • Sites with frequent content changes (editing requires HTML file modification)
  • Large image galleries (base64 embedding inflates file size)
  • SEO-critical landing pages (single-file approach limits optimization)

What you get

  • Single 1.8MB HTML file with 9 embedded WebP images
  • Bilingual ES/EN with instant switching via CSS
  • Intersection Observer scroll reveal system
  • Web Audio API procedural soundscape
  • Deployed on Vercel with zero build step

Related Projects

Have a similar challenge?

Let's talk about how a solution like this could work for your team. Free call, no pitch.

Book a Free Call