All projects
Agency project · Artefact 30002025

BNP Paribas

ReactViteTypeScriptPixiJSGSAPFramer Motionreact-beautiful-dndSCORM 1.2Accessibilitéi18nStorybook

Generative AI e-learning module

One of the projects that challenged me most. Built at Artefact 3000 for BNP Paribas, this gamified e-learning module trains thousands of employees in the fundamentals of generative AI. 6 chapters, 5 types of mini-games, 6 AI-generated videos, a guide character. And above all, a bet few agencies dare to make: replacing Articulate Storyline with a full React app, packaged as SCORM 1.2 to plug into any enterprise LMS.

Overview01

An e-learning module that replaces Articulate with a React app.

6 chapters, 5 mini-games, 6 AI-generated videos, a guide character, packaged in SCORM 1.2 to integrate with BNP's internal LMS.

Fig.01 — L'écran d'introductionInternal SCORM module

The introduction screen: AI-nstein — an AI character inspired by Einstein — guides the user through a chat interface, sending messages and asking questions answered by clicking. Alongside it, the main course module displays the interactive content for the current chapter. At the bottom, a progress bar tracks advancement across all six chapters. The interactive games come in the following chapters.

Section02

The interactive mini-games

Five distinct mini-game types, built from scratch with PixiJS. DataShield: intercept sensitive data in free fall. A prompt categorizer via drag-and-drop. A hallucination hunt. And for chapter 5, the press convoy: an invisible physical object represents the case on the conveyor belt, synced frame-by-frame with the video, to trigger entry into the presses at the right moment.

Generative AI e-learning module — The interactive mini-games — view 0
Generative AI e-learning module — The interactive mini-games — view 1
Generative AI e-learning module — The interactive mini-games — view 2
Generative AI e-learning module — The interactive mini-games — view 3
Generative AI e-learning module — The interactive mini-games — view 4
Generative AI e-learning module — The interactive mini-games — view 5
Generative AI e-learning module — The interactive mini-games — view 6
Generative AI e-learning module — The interactive mini-games — view 7
Generative AI e-learning module — The interactive mini-games — view 8
Section03

Learning, recaps & results

Each chapter follows the same rhythm: an AI-generated intro video, explanations, an interactive game, then a recap or results screen that clearly separates right from wrong. At the end of the journey, a skills passport validates all chapters.

Generative AI e-learning module — Learning, recaps & results — view 0
Generative AI e-learning module — Learning, recaps & results — view 1
Generative AI e-learning module — Learning, recaps & results — view 2
Generative AI e-learning module — Learning, recaps & results — view 3
Generative AI e-learning module — Learning, recaps & results — view 4
Generative AI e-learning module — Learning, recaps & results — view 5
Generative AI e-learning module — Learning, recaps & results — view 6
Generative AI e-learning module — Learning, recaps & results — view 7
Generative AI e-learning module — Learning, recaps & results — view 8
Generative AI e-learning module — Learning, recaps & results — view 9
Under the hood04

Five decisions that defined the project.

For developers and recruiters: here are the technical choices that shaped this gamified e-learning module, from replacing Articulate to full keyboard accessibility.

01

Replacing Articulate Storyline with React within the agency

Artefact's SCORM modules were produced with Articulate Storyline — a no-code tool, fast, but design-constrained, animations impossible, no custom interactivity. Freelancers were paid to produce slides. The goal: prove we could deliver the same SCORM 1.2 compatibility with a real React app — and change the agency's workflow for all future e-learning clients. The technique exists, but it's rarely implemented in an agency context where Articulate is the norm.

02

Understanding and implementing the SCORM 1.2 protocol

SCORM 1.2 is a standard from the 2000s. A SCORM package is a ZIP archive with an XML manifest (`imsmanifest.xml`) describing the module, and a JavaScript API (`LMSInitialize`, `LMSSetValue`, `LMSCommit`, etc.) that the LMS exposes to the page. I studied the spec, understood the communication protocol, then integrated `pipwerks-scorm-api-wrapper` to abstract LMS calls — enabling score, progress, and completion status to flow from the React app back to BNP's LMS.

03

State machine for a complex pedagogical flow

6 chapters, an intro, a final sequence, dozens of conditional steps based on user responses — without any server-side routing. The entire flow is modeled through Zustand state machine stores. Each step exposes its entry and exit conditions, its contribution to progress, and its conditional rendering.

04

Canvas mini-games in a static SPA

Each chapter has its own mini-game — a brick game with paddle and ball (PixiJS), a shield intercepting falling data, an AI hallucination hunt, a package categorizer. Integrating PixiJS into React required manually managing the canvas scene lifecycle to prevent memory leaks between chapter transitions.

05

Full accessibility — keyboard navigation, audio description, zoom

BNP required strict accessibility compliance. When the module opens, the user selects their language, enables or disables audio description, sets the zoom level, and chooses between standard navigation and keyboard navigation (Tab). In keyboard mode, every focusable element is announced by voice before interaction — the user hears what they're positioned on before pressing Enter to confirm. We even pushed to implement keyboard drag & drop, before disabling it in production to avoid overloading the experience. This was probably the longest and most tedious part of the project — every component, every game, every transition had to be tested with tabindex, aria attributes, and voice announcements.

Project stack05

The tools powering the module.

01React + ViteStatic SPA · self-contained SCORM-compatible build
02SCORM 1.2 (pipwerks)LMS communication · score · progress · completion
03PixiJSHigh-performance WebGL canvas mini-games
04react-beautiful-dndAccessible drag & drop · ARIA · keyboard navigation
05GSAPOrchestrated text · image · sound timelines
06Framer MotionReact UI component animations
07ZustandPedagogical flow state machine (6 chapters)
08StorybookVisual component validation in isolation
Team06

Who I worked with.

The project was led at Artefact 3000, in close collaboration with a design team and a product manager.

01Mathieu CrochetManager & architecture · Artefact 3000
02Vincent BlacherHead of Design · Artefact 3000
03Pauline RavelUX Designer · Artefact 3000

A project of this scale?

I design and build custom e-learning modules and interactive applications.

React apps, canvas mini-games, state machines, accessibility, SCORM: this project laid the groundwork I can bring to your next build.

View my packages

Next project

TotalEnergies

Carte interactive des producteurs locaux