Continuous motion
Authored greeting, start, explanation and idle states transition through dedicated blended clips instead of teleporting between poses.
Interactive AI System / WebGL
A digital twin that can explain the work.
A browser-based 3D character combining authored animation, continuous gesture blending, speech-driven lip movement, controlled AI context and graceful fallbacks.
13 animation clips
8 viseme targets
30 FPS authored motion
Drag to inspect · scroll to zoom · ask a question by voice or text
Engineering evidence
More than a character model.
The work is the orchestration: animation, speech, interaction, rendering and failure recovery operating as one coherent browser system.
Speech coordination
Generated or browser speech drives viseme targets and body-performance timing while protecting the first spoken words with audio readiness checks.
Controlled AI context
Answers are grounded in a maintained professional source of truth rather than pretending to know unrestricted personal information.
Resilient delivery
Text remains usable when WebGL, microphone access, speech recognition, transcription or generated audio is unavailable.
Visual direction
Paper texture, not plastic futurism.
The character deliberately avoids the generic metaverse-avatar look. Layered paper materials, an architectural studio, dimensional shadows and controlled aqua-and-amber light connect the 3D experience to Sadeq's wider editorial portfolio identity.
- Material
- Layered paper-cut surface
- Environment
- Purpose-built studio set
- Camera
- Human eye-level portrait framing
- Signal
- Aqua system state · amber detail
System architecture
Input becomes a coordinated performance.
- 01User inputText or microphone
- 02TranscriptionBrowser or server fallback
- 03Grounded responseControlled professional context
- 04Speech analysisAudio energy + transcript timing
- 053D performanceVisemes + blended gestures
Three.jsWebGLGLTFWeb SpeechMediaRecorderGeminiNetlify Functions