Beeb er BBCs stemmeassistent, og Agens ble engasjert for å lage det visuelle uttrykket den snakker gjennom. Resultatet er et lydreaktivt animasjonssystem som renderer halftone-baserte bølgeformer som respons på hva assistenten gjør – lytter, tenker, svarer, feiler eller hviler.
Animasjonssystemet
Beeb er bygget som en WebGL-renderingspipeline der et sett parametere – størrelse, farge, bevegelse, tetthet og opasitet – styrer uttrykket. Ved å skru på disse parameterne beveger animasjonen seg mellom emosjonelle tilstander: passiv tenkning, overgang, aktiv lytting, svar og feil.
Koden er strukturert slik at hver tilstand er en isolert komponent med tydelig separasjon mellom logikk og tegning:
- Canvas-pipeline i TypeScript med
phenomenon/ Three.js, med støtte for ulike skjermoppløsninger og retina-display. - Storybook-drevne stories for hver tilstand –
listening,thinking,speech,idle– og for overgangene mellom dem (transition01–transition03), slik at BBCs designteam kunne justere parametere via knobs uten å røre koden. - Ytelsesoptimalisering: færre «minims» (primitive former), unngå unødvendige draw-kall, og respons på endringer i bredde, høyde og oppløsning.
Presentasjonen — Agens Playground
For å vise fram systemet bygget vi også en scroll-drevet showcase-artikkel: en kombinasjon av case study og levende demo, der selve Beeb-animasjonen pulserer mens du leser. Framer Motion driver scroll-baserte overganger, slik at Beeb transformerer seg i takt med lesingen og demonstrerer de ulike tilstandene og parameterkombinasjonene rett i teksten.
Stack
TypeScript · React · Three.js · phenomenon · Canvas API · WebGL · Storybook · Framer Motion · styled-components
