Skip to content
Projects
Character Chat
Personal·design

Character Chat

Animated AI Characters on iOS

iOSSwiftMetalSwiftUIVideo
Eight characters, each with eight emotion loops (fidget, thinking, happy, laughing, angry, disgust, fear, surprised), render as transparent-video avatars. A Metal compute shader splits stacked-alpha frames — color on top, mask on bottom — into RGBA on the GPU. Loops are preloaded so emotion swaps are instant; each swap is masked by a brief scale-pop so the transition reads as intentional rather than a hard cut.
In group conversations, characters arrange across three depth tiers — foreground, midground, background — with ground shadows and spring animations. The most recent speaker moves to the front. When you start typing, characters scale down and recede; when you stop, the active character zooms back in.
Chat bubbles use variable-font interpolation: each character animates from bold to regular weight as it's typed, with a kerning shift that makes the text settle. The thinking bubble is a CADisplayLink-driven breathing cloud with iMessage-style dots. When thinking finishes, the cloud morphs into a circle via Bezier interpolation and collapses downward as the message slides in — the overlap is what makes the handoff feel seamless.
Built with SwiftUI + UIKit bridges (AVPlayer, Metal, CADisplayLink) for Xcode 17 / iOS 26.