
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.