# Lia > Lia is an experimental AI character designed to explore how a few shapes, expressions and movements can bring an interface to life. - Year: 2023 - Category: Playground - Page: https://hvdrien.com/en/playground/lia Lia is a small female character I started developing around 2023. At first, she wasn’t really meant to be a character in her own right, but more of an assistant with a fairly limited role: helping visitors to my portfolio learn more about my projects and about me. ## Origin The very first version of Lia was born from a fairly simple question: how do you integrate an AI running on ChatGPT without it feeling like just another chatbot? I wanted the project to have at least a bit of soul, and a more personal direction. The name “Lia” came naturally from “l’IA”, French for “the AI”. At that point, the character had no real appearance or defined personality yet. Just a name, and a colour: a kind of very light pastel pink. [Video: Lia’s first appearance.](https://hvdrien.com/assets/content/lia/vid/first-lia-hadrienverrecchia-website.mp4) *Lia’s first appearance.* In the end, this first version of Lia stayed fairly close to a classic chatbot, but, at the time, all the work on the opening and closing animations already gave it a bit more charm and identity. ## First integrations Lia was notably integrated into Em, an editor concept I had started designing and building around 2024. It was a kind of app mixing Word-style document editing with an organisation and filing system closer to Obsidian or Notion. The idea was to have a local AI able to understand my projects, find information, reorganise my ideas or simply help me think them through. ![Lia’s second integration. [1]](https://hvdrien.com/assets/content/lia/img/em.png) *Lia’s second integration. [1]* That’s when Lia started to become more than just a name. I wanted to be able to see her react during a conversation, which brought me back to my original wish: giving Lia more charm and character. So I found a small character image on Pinterest that seemed to match the idea I had of Lia, and added it to the interface. ## Creating the character Quickly, I needed to create something more unique and, above all, truly original. That said, there were a few constraints to respect. Since Lia was meant to appear directly inside an interface, she needed: - a face with few details; - an easily recognisable shape; - good legibility, even at small sizes; - and above all, a structure flexible enough to make her expressive. With all that in mind, I tried asking generative models to imagine Lia. ![The first and last generated attempt at imagining Lia.](https://hvdrien.com/assets/content/lia/img/chatgpt.png) *The first and last generated attempt at imagining Lia.* Since the result was pretty far from what I had in mind, I ended up starting from scratch to create the character myself. It was the first and last time I used AI to make… Lia. I went back to Figma and started building Lia by hand. I began by collecting references of mascots, simplified characters and different ways of drawing a face with very few elements. ![A few references used during the early research. [2]](https://hvdrien.com/assets/content/lia/img/moodboard.png) *A few references used during the early research. [2]* The main shape came together fairly quickly. After that, the work was mostly about refining the proportions: the width of the face, the position of the eyes, the radius of the curves and the overall balance of the character. ![The different passes on Lia’s shape and face.](https://hvdrien.com/assets/content/lia/img/craft.png) *The different passes on Lia’s shape and face.* ![The first final version of Lia’s face.](https://hvdrien.com/assets/content/lia/img/final-face.png) *The first final version of Lia’s face.* ## Adobe Around the same time, Adobe had presented, a little while earlier, an experimental vector rotation system, able to generate several angles from a single vector drawing. [3] So I tried it on a first version of Lia that I had only just finished. ![Project Turntable on Lia’s face. [3]](https://hvdrien.com/assets/content/lia/img/turntable.png) *Project Turntable on Lia’s face. [3]* The result was far from perfect. Some curves got distorted, the proportions sometimes shifted in strange ways and several details needed manual fixes. But the experiment was still very useful. Seeing Lia from different angles helped me better understand the implicit shape of her head, and how certain elements needed to change when she looked in another direction. ## Expression system Lia’s face is deliberately built with very few elements. This simplicity makes it possible to change her expression a lot without losing the character’s identity. Some shapes stay almost always the same, while others can be moved, rounded or slightly distorted. The goal was to build a kind of visual grammar: even with a very different expression, Lia should always remain instantly recognisable. ![First constructions and variations of Lia’s face.](https://hvdrien.com/assets/content/lia/img/first-faces.png) *First constructions and variations of Lia’s face.* A single expression was obviously not enough to give the impression that Lia was really present in an interface. So I had to build more of them, gradually putting together a real bank of expressions for the character. Today, the system is based on **8 main expression families**. [Interactive: Lia’s expression families.] *Lia’s expression families.* Each family then has **5 variations**, making **40 different faces**. [Interactive: Different variations of Lia’s expressions.] *Different variations of Lia’s expressions.* The variations aren’t just there to multiply the faces. Above all, they keep a reaction from always being exactly the same, which makes them less repetitive and more natural. ## The eyes and the gaze The eyes play an important part in Lia’s behaviour. They can: - follow an element of the interface; - look at the cursor’s position; - move slightly when nothing in particular is happening; - or blink from time to time. These are very simple movements, but enough to completely change how the character is perceived. ## Animation The expressions are then combined with various small movements: - slight head movements; - transitions between two expressions; - micro-movements while waiting for an answer. These few variations help avoid a completely static pose. The point isn’t to create a particularly complex character animation. On the contrary, Lia works best when the movements stay subtle: just present enough to give the impression that she’s really reacting to what’s happening. ## In context Lia was never really meant as a standalone illustration. She works best when she’s part of an interface or an interaction with the user. In fact, it’s largely this context that makes the character feel alive. If Lia manages, through her movements, reactions and interactions, to give the impression that she’s alive, then even when she stays still, her face keeps that presence. You always feel like she could react or answer you at any moment. ## Current system With all that, you can now play around with Lia: **Lia Playground** [Interactive: Lia Playground] Today, she relies on several building blocks: - **8 main expression families**; - **5 variations per expression**; - **40 different faces**; - **several gaze states**; - **blinks**; - **head movements**; - **transitions between different states**. Taken separately, each of these elements is extremely simple. But it’s their combination that really starts to give the character a personality. ## What’s next Lia is still largely experimental. There are still plenty of things I’d like to explore: more natural transitions between certain expressions, more contextual movements, new reactions and, above all, a better connection between what the AI says and what the character expresses. The goal isn’t necessarily to make Lia more complex. It’s rather to succeed in giving her more personality. --- **References** 1. Icon: [Magnific](https://www.flaticon.com/fr/icone-gratuite/visage-de-fille-aux-cheveux-longs_62942) 2. From top to bottom, left to right, Images 1, 3 and 4: [Mogaesan](https://x.com/Mogaesan) · Image 2: [kohufied](https://www.facebook.com/groups/1106838863654712/user/61586011912068/) · Image 5: [JIBABA](https://x.com/Marcchiato4) · Image 6: [unknown artist](https://fr.pinterest.com/pin/1003950941912965453/) · Image 7: [poqo.257](https://www.instagram.com/poqo.257/) 3. [Project Turntable, Adobe](https://www.youtube.com/watch?v=gfct0aH2COw)