Skip to content

WorkInteractiveDevelopment

Honeybee Heroes

Adopt a hive, then talk to Mellie, a 3D bee who answers.

Live site (opens in a new tab)Code (opens in a new tab)
Role
Design and development
Year
2026
Context
Postgrad (PGDip), PP 410, Theme 2
Stack
React · Vite · Three.js · OpenAI gpt-4o-mini · ElevenLabs TTS · Firebase
Honeybee Heroes open in a browser on a MacBook Pro

Desktop

Honeybee Heroes on an iPhone

Mobile

01The challenge

Make adopting a hive feel personal for a real South African bee-adoption non-profit, on one landing page, and without a wall of text.

Section on the beekeepers who care for each hive, with training, local impact and future-skill cards
Live site, captured October 2026.

02The approach

  1. 01

    Meet Mellie

    A 3D bee mascot, loaded as a GLB into Three.js, that visitors can talk to. Mellie answers through OpenAI gpt-4o-mini and speaks with ElevenLabs text-to-speech.

  2. 02

    A guide on every screen

    The page moves from why farms depend on pollinators, to the people who care for each hive, to meeting your bees, with Mellie one tap away the whole time.

Screens05 Scroll
“One landing starts the whole chain.”, a honey bee on a pink flower, with Mellie's speech bubble above
Live site, captured October 2026.
“Explore the honey bee up close.”, an interactive Cape honey bee card with a range map of Southern Africa
Live site, captured October 2026.
Adoption steps on stacked honeycomb cards: “Your hive is yours.” and “You follow the story.”
Live site, captured October 2026.
“A third of every plate.”, a spread of fruit, vegetables and cheese with pollination stats and Mellie explaining
Live site, captured October 2026.
“Four ways to become a hero.”, the Honeybee adoption package at R2,900 beside three more package cards
Live site, captured October 2026.

03Highlights

  1. 01Conversational 3D mascot (Three.js + GLB)
  2. 02AI responses with OpenAI gpt-4o-mini
  3. 03Voice with ElevenLabs text-to-speech
  4. 04React + Vite on Firebase

Built with

  • React
  • Vite
  • Three.js
  • OpenAI gpt-4o-mini
  • ElevenLabs TTS
  • Firebase

04Credits

Enzo De Vittorio
Design and development
Client
Honeybee Heroes