BIOSCIAI
The digital home of BioSciAI, a University of Alberta startup engineering an AI-powered, point-of-care device designed to identify fungal pathogens from a patient sample in under an hour. A credible, investor-ready platform with a custom 3D animated hero, CMS-managed research, and the polish a deep-tech startup needs to win partners and funding.
BioSciAI is a University of Alberta startup with genuinely world-class science: an AI-powered, point-of-care device designed to identify fungal pathogens, including the deadly, multidrug-resistant C. auris, from a patient sample in under an hour, where conventional lab methods take days. Founded by two PhD researchers and backed by peer-reviewed publications and an Alberta Innovates grant, they needed a website as advanced as the technology behind it. The audience is not walk-in customers. It is investors, hospital partners, grant committees, and top research talent, and the site had to earn credibility with every one of them at a glance.
We built a clean, editorial-scientific site that reads like a lab instrument crossed with a science magazine, then gave it a signature centerpiece: a custom-built 3D animation of a living fungal cell that drifts behind the hero. The entire platform runs on a headless CMS, so the founders can publish new research and team updates themselves without ever touching code.
Custom Three.js 3D hero animation a procedurally generated, biologically faithful budding fungal cell that floats behind the headline, built from scratch in WebGL rather than pulled from a stock library
Storyblok headless CMS fifteen content types powering research, publications, team, and partners, each with build-safe fallback content so the live site can never break
Five-page investor-ready platform Home, Technology, Research, Team, and Contact, architected to build credibility with investors, hospital partners, and grant committees
Mobile Experience
The full editorial-scientific design and the 3D cell hero carry across to mobile, performance-tuned so the WebGL never blocks the page load.
The Technology Story
A striking editorial technology page, "Why are we still using 20th-century methods for a 21st-century threat?", walks partners from clinical sample to species call.
Research and Credibility
Peer-reviewed publications, a 97% top accuracy figure, and Alberta Innovates funding are all surfaced to establish scientific authority.
Custom 3D Cell Animation
A bespoke Three.js WebGL scene renders a translucent, budding fungal cell with a glowing nucleus and mitochondria drifting across the hero. It fades and pauses on scroll, respects reduced-motion, and defers its own setup so it never slows the page down.
Founder-Managed Content
A Storyblok headless CMS lets the founders publish new papers, team members, and partners on their own. Every section ships with built-in fallback content, so the live site is impossible to break.
Built to Win Investors
Peer-reviewed publications, species-level accuracy tables, an explainable-AI showcase, and partner and funding logos are woven throughout to establish the scientific and institutional credibility a deep-tech raise depends on.
The centerpiece is a custom 3D animation written from scratch in Three.js. Rather than drop in a stock effect, we procedurally generated a biologically faithful budding yeast cell: a translucent teal cell wall with a noise-mapped organic surface, an emissive nucleus, a vacuole, and glowing mitochondria, lit with a filmic rig and drifting along a slow, organic path. It is deferred until after load and paused whenever it scrolls off-screen, so a heavy WebGL scene never costs a millisecond of perceived performance.
Around it sits a static Astro build wired to a Storyblok headless CMS across fifteen content types, from publications and pathogen accuracy tables to founders and advisors. Type pairs Inter with Noto Serif italic and JetBrains Mono for a precise, instrument-readout feel, and the whole site is engineered for accessibility and speed: reduced-motion support throughout, lazy-loaded imagery, structured data, and a build-safe content layer that keeps the site standing even if the CMS is empty.
EXPLORE MORE PROJECTS
Green Oasis Services
A CMS-powered platform for Edmonton's most trusted lawn care company, three audiences, quote forms on every page.
Read Case Study
Edmonton Top Law
One of Edmonton's top litigation firms, a commanding 30+ page build with qualifying client intake and full Stripe-powered invoice payments built right into the site.
Read Case Study
CARFAC Alberta
The Alberta chapter of Canadian Artists' Representation (CARFAC), a 54-page platform with online memberships, donations, a Stripe & Snipcart merch shop, and a searchable 598-member directory.
Read Case StudyWant Results Like These?
Get a free consultation to discuss your project. No pressure, no sales pitch, just an honest conversation about what you need and how we can help.