The Little Alva

Role

Creative Technologist

Highlights

Inspired by a weekend read of The Little Prince

Tools

Vercel. Media Pipeline. Claude Code. HTML. CSS. JavaScript.

Date

2026

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Inspired by a reading of The Little Prince by Antoine de Saint-Exupéry.

01 The Challenge

A résumé can list the projects, but it cannot show the thinking* that brought them to life.*

While applying for jobs, I found myself in the strange limbo between the work I had already done and wherever I might land next. During that stretch, I read The Little Prince. Its journey across unfamiliar planets felt a little like job searching, only with more sunsets and fewer application portals.

That was when I realized a résumé can show the planets you have visited, but not how you learned to navigate them. When a hiring team opens my application, they usually have my résumé, portfolio, and only a few minutes. The project titles show what I made, but not how I approach unfamiliar systems, build useful ideas, or translate them clearly for others. So I created Little Alva to make that thinking visible, turning each chapter of my experience into a world people could enter rather than another bullet point to skim.

02 The Idea

Each chapter of my creative and technical experience becomes a planet* waiting to be explored.*

The journey begins with the first definition of AI, Alva Intelligence, Little Alva’s home planet and the creative system behind my work. From there, the meaning of intelligence broadens across five more planets shaped by my experience in machine learning, audience strategy, generative content, creative technology, and new business. Together, the six worlds show how my work and understanding of AI have continued to evolve.

03 The Experience

Visitors fly between planets, discover hidden objects, and unlock* the real projects behind the story.*

Visitors guide Little Alva across six different planets, each representing a chapter of my creative and technical experience. Gamified exploration invites them to navigate each world, search for a hidden object, and unlock the project connected to it. The experience turns my portfolio into an interactive journey through where I have worked, what I have created, and how I think.

04 The System

WebGL, canvas, and DOM work in layers to keep the 3D experience immersive and the information readable.

The whole piece is three surfaces stacked so that they never touch each other's pixels, with a WebGL scene at the back, a field of dots over it that draws every word in the same language the render speaks, and a thin layer of real DOM in front for anything a person actually has to read, and none of it is fetched at run time.

WorldsEvery world is generated in code rather than imported, so thousands of instanced objects sway, dissolve and react without the CPU rebuilding the scene.
LookBloom, a custom grade, grain, barrel warp and ordered dithering resolve the worlds, the type, the logos and the ending into one lattice of dots.
The characterHe is a rig built out of parts rather than a loaded model, and his scarf is a real verlet cloth simulation, because apparently the résumé needed physics.
InteractionMouse, keyboard or autopilot fly him and raycasting picks objects while he walks the surface of a sphere, and although MediaPipe can read hand gestures through the camera, the camera is never required.
SoundEvery sound is synthesised at run time with Web Audio, so footsteps follow the gait and writing arrives on small ticks without a single audio file shipping.
ResilienceThe dot field keeps its own clock so the story stays readable even when the scene has a rough frame, with delta clamped, pixel ratio capped and a shorter, stiller version for reduced motion.
DeliveryIt ships as one self contained HTML file with no runtime fetches, so there is nothing to break inside a sandbox and no loading spinner pretending to be part of the story.
MethodClaude Code worked as a technical collaborator across the two days while I made every call on narrative, product behaviour, visual system and what counted as done.

05 The Interaction

Real-time hand tracking turns the viewer’s webcam into a touchless* controller at the story’s* most critical moment.

At a turning point in the journey, two figures pull Little Alva into the dark and the keyboard controls stop working. To free him, visitors must turn on their webcam and use their own hands to push the figures away. MediaPipe tracks 21 points on each hand in real time and translates those movements into controls inside the story. The model loads only when this interaction begins, keeping the rest of the experience lightweight.

From an empty file to a finished universe

48hours, two days

In 48 hours, I wrote the story, designed six planets, built the interactions, and packaged the entire experience into one portable file. It opens directly in a browser with no installation or setup. The case study explains how it was made, but the best way to understand it is to step inside and explore it yourself.

The little Alva Open the experience

Renderthree.js r169, WebGL, custom GLSL, EffectComposer, UnrealBloom, an ordered dither grade
MotionGSAP 3, SplitText, CustomEase, and a dot field on its own clock
InputMediaPipe Tasks Vision, Hand Landmarker, pointer, keyboard, autopilot
SoundWeb Audio, synthesised at run time, no audio files
Assetsgltf-transform, Draco free quantisation, ffmpeg, base64 into the bundle
Buildesbuild, one pass, one self contained HTML file out
TestingPlaywright on a software renderer, with frame stepping instead of timers
Made withClaude Code, Figma, Adobe Creative Cloud, Webflow

SELECTED WORKS

The Little Alva

A résumé can list the projects, but it cannot show the thinking that brought them to life.

Each chapter of my creative and technical experience becomes a planet waiting to be explored.

Visitors fly between planets, discover hidden objects, and unlock the real projects behind the story.

WebGL, canvas, and DOM work in layers to keep the 3D experience immersive and the information readable.

Real-time hand tracking turns the viewer’s webcam into a touchless controller at the story’s most critical moment.

the insights

THE IDEA

STATIC

experientials

Commercial

AD TESTING

THE AAF MSU CREW

the insights

THE IDEA

STATIC

experientials

Commercial

AD TESTING

THE AAF MSU CREW

the insights

THE IDEA

BRAND DESIGN

STATICS

BRANDING MERCH

OUT-OF-HOME

SOCIAL

EXPERIENTIAL

the insights

STATICS

ACTIVATIONS

Branding

inspiration

TYPOGRAPHY

Color palette

Logo Process

MOBILE APP

KEY VISUALS

BOOKMARK ORIGAMI

AR EXPERIENCE

print ad

BREWING IDEAS...

A résumé can list the projects, but it cannot show the thinking* that brought them to life.*

Each chapter of my creative and technical experience becomes a planet* waiting to be explored.*

Visitors fly between planets, discover hidden objects, and unlock* the real projects behind the story.*

Real-time hand tracking turns the viewer’s webcam into a touchless* controller at the story’s* most critical moment.