Kiki World
Kiki World
A story-driven 3D studio where an animated avatar explores a playful, interactive world.
“I can build polished, performant interactive 3D experiences.”
01
Problem
Turn isolated Three.js experiments into one coherent experience with a clear journey and purpose.
02
Role
Creative direction, interaction design, 3D frontend architecture, animation, accessibility, and performance engineering.
03
Constraints
The scene needs to feel rich on desktop while remaining controllable on touch devices, respectful of reduced-motion preferences, and useful when a device cannot sustain the full visual workload.
04
Process
I made the rooms the narrative structure, then integrated the avatar as the visitor. Input is normalized across keyboard, pointer, and touch, while intentional camera transitions and interaction cues make each space understandable.
05
Result
A responsive three-room experience in which Kiki walks between Make, Rest, and Connect, changes outfits, and transitions into room-specific activities while the camera and rendering quality adapt to the device.
Experience highlights
- Three explorable rooms with distinct stories, lighting, and avatar activities
- Blended walking, waving, typing, sitting, dancing, and idle animation states
- Four switchable outfits that preserve the active room and journey state
- Wheel, keyboard, click, swipe, touch, and compact mobile navigation
- Loading progress, reduced-motion behavior, and manual or automatic performance modes
Engineering & performance
- Next.js and TypeScript provide the application shell around React Three Fiber and Three.js
- Horizontal root motion is removed from Mixamo clips so the avatar remains aligned with room destinations
- Responsive camera framing adapts to portrait, landscape, and short-screen layouts
- Adaptive device-pixel ratio and performance monitoring reduce detail when sustained frame rate declines
- Only the six animation clips used by the experience are shipped and GLB assets are preloaded
