Storytelling Edition
A portfolio narrated by five original animated characters.
- Client
- Ultra Sites — in-house
- Sector
- Interactive narrative
- Year
- 2025
- Reference
- No. 03
Scope
- Narrative design
- Character animation
- 3D scene
- Procedural audio
Stack
Ref 03 · interface preview
Overview
The third build asks what a portfolio could be if it behaved like a story. Visitors choose one of five original characters — a sardonic dev, a serene AI, a retro game sprite, a craft-obsessed artist, a literal-minded robot — and their guide narrates the site chapter by chapter.
Under the hood it is a full narrative engine: a scripted dialogue system per character, a shared life rig for gaze and blinking, a Three.js hero scene, and voices synthesised in WebAudio — no audio files at all.
The challenge
Making a gimmick-proof guide: five distinct personalities, timed to scroll, that stay charming on the tenth visit, respect reduced motion, and never block the content they narrate.
The approach
- 01
A chaptered scroll spine — prologue to epilogue — where every guide line is data, not markup: one dialogue file scripts all five characters across nine chapters.
- 02
A shared 'life rig' hook gives every character gaze-tracking, blinks and idle fidgets from one implementation, so personality lives in the art, not duplicated code.
- 03
Procedural WebAudio voices, muted until opted in, plus easter eggs — a Konami code, a five-tap monogram — that reward the curious without taxing the rest.
Outcomes
5
original animated guides
9
narrated chapters
0
audio files — voices are procedural
Next case · Ref 04
Editorial Edition