We built Buzz Intelligence as a full product concept because we discovered that the global bee economy generates over $577B in agricultural value annually and no serious data platform existed for it. We built one. A live Three.js globe with a latitude and longitude accurate network of 40 hive nodes, an ROI calculator that makes the economic case immediately visible, and six enterprise verticals with tailored value propositions. This was our first time working with Three.js and we pushed it further than we expected.
https://buzz-intelligence-lionfish.netlify.app
The full product experience. Everything runs in the browser. No setup required.
The bee economy generates over $577B in global agricultural value annually. Buzz is the data layer for it. Colony health monitoring, pollination scheduling, pesticide impact analysis, and supply chain traceability, delivered as an enterprise SaaS platform.
This project is the complete product experience. Marketing, concept design, and interactive demo, built in HTML, CSS, and JavaScript.
3D Globe Visualization A full Three.js scene. A rotating Earth with a latitude and longitude accurate network of 40 hive nodes, glowing healthy and distressed status indicators, animated bee particle swarms traveling bezier arcs between colonies, a pollen particle field, and an atmospheric glow layer. No canvas library. No abstraction. Raw Three.js geometry, materials, and animation loop.
Enterprise Sector Grid Six verticals: Commercial Apiaries, Agriculture and Farming, Food and Beverage, AgTech and Research, Government and Policy, and Conservation NGOs. Each with a tailored value proposition and hover interaction.
Dashboard Preview A simulated real-time colony health dashboard with staggered row animations, health status indicators, mini sparkline charts, and a two-column layout demonstrating the product UI.
Interactive Product Walkthrough A five-step panel system with progress tracking, narrative copy, hive detail views, and distress signal visualization. Simulating an onboarding flow through the platform.
ROI Calculator Fully functional business logic. Users input hive count, industry type, crop value, and historical loss rate. The calculator returns colonies saved, hive cost savings, yield uplift, and projected annual ROI. All computed in real time.
Design System Built entirely with CSS custom properties. An earth, honey, and meadow color palette, Playfair Display serif headings, IBM Plex Mono monospace accents, IBM Plex Sans body text, and a consistent spacing and typography scale across every section.
Three.js r128. 3D globe, particle systems, bezier arcs, animation loop.
HTML, CSS, and JavaScript. No framework, no build step, no dependencies beyond Three.js CDN.
CSS custom properties. Full design token system with 10 named colors, consistent type scale, and responsive grid.
Single-file architecture. The entire application lives in buzz-app.html.
Everything in one file, by design. No bundler, no npm, no module graph. The constraint forces clarity. Every line of CSS is intentional, every JavaScript function has a defined scope, and the rendering pipeline is completely transparent.
buzz-app.html
├── <head> — design tokens, typography, full CSS (1,700+ lines)
├── <body>
│ ├── #globe-canvas — Three.js render target, fixed, full viewport
│ ├── <nav> — fixed navigation
│ ├── #hero — headline, stats, CTAs
│ ├── #who — six-sector enterprise grid
│ ├── #platform — dashboard preview + feature list
│ ├── #experience — five-panel product walkthrough
│ ├── #roi — interactive ROI calculator
│ └── #closing — CTA section
└── <script> — Three.js scene, animation loop, calcROI()
No install. No server. Open the file.
open buzz-app.htmlOr serve it locally
npx serve .
# → http://localhost:3000Why single-file? Speed, portability, and discipline. A single file can be dropped anywhere, opened by anyone, and demoed instantly. It also forces every CSS rule and JavaScript function to justify its existence. There is nowhere to hide complexity.
Why Three.js for a landing page? The globe is the product. Bee colonies are a global phenomenon. A static map or a stock photo would betray the scale of what Buzz is meant to represent. The animation makes the platform's scope immediate and visceral before a single word is read.
Why Playfair + IBM Plex? Playfair signals gravitas and craft. It belongs to the world of conservation, science, and long-horizon thinking. IBM Plex Mono grounds the data elements in technical credibility. Together they hold the tension between nature and enterprise that the product lives in.
This was our first time working with Three.js. We built a production quality 3D globe anyway. That is how we approach everything we do not know yet. The only way to understand something is to push it until you see where the edges are.
Raw geometry, materials, an animation loop, bezier arcs, a particle system, and an atmospheric glow layer. No abstraction over the renderer. No canvas library. Every line was deliberate because we had to understand what it was doing before we could write the next one. We are newer to this field and we bring genuine curiosity and the discipline to work through hard things. This project is proof of that.
The single file constraint and the ROI calculator taught us the same thing from different directions. When everything lives in one file there is nowhere to hide complexity. When you build a business case calculator you cannot approximate the math. Every rule has to earn its place. Every output has to be real. The standard underneath all of it is always the same. Will this actually hold up?
We proved the concept and we are proud of what is live. The part that excites us most is what comes next.
- Live hive telemetry. The globe renders simulated nodes right now. Connecting it to a real data source turns the visualization from a demonstration into infrastructure.
- User accounts and saved calculations. Every session starts over today. Persistence makes the ROI calculator a real planning tool for the people who need it.
- Deeper enterprise verticals. We built six. Government and conservation have different data needs than commercial apiaries and we want to go further into both.
- Mobile layout. The globe scales. The dashboard preview and calculator need responsive work to hold up on smaller screens and we are going to give them that.
Public. Active development. Deployed to Netlify.