Motion & Video · Web & Digital
Lizzie Teo draws a 90s Mac character in Rive and has Claude animate it for her portfolio
A product designer rigs a Mac icon in Rive herself, then has Claude add the animation and cursor-reactive rules through a Rive connection.
Done withRRiveCCClaude Code
Creator's own portfolio piece; not client work; Rive MCP named on X, not in the article
WHAT THEY DID
Lizzie Teo, a Sydney product designer, traces and draws a 90s Mac icon in Rive and gives it bones. She then connects Claude to the Rive file and directs the animation and the state-machine rules in plain words.
STEP BY STEP
- Trace and draw the Mac icon in Rive and add bones.
- Connect Claude to Rive, reusing Rive skills she set up for her Michi app.
- Describe movements in plain words; Claude builds them, she reviews and asks for fixes.
- Write the state-machine rules with Claude Code: follow the cursor, light the screen per project, jump on tap.
- Place the Mac in her 'Ask Lizzie' chat, with answers she rewrote and a small on-site model for matching.
HOW IT WENT
By her account the Mac on lizzieteo.com follows the cursor, lights its screen in each project's colour on hover, switches like an old TV and reacts inside her 'Ask Lizzie' chat. The blink took a few attempts.
Reported results: She can now make simple animated characters on her own instead of hiring a Rive animator, and the chat's matching runs on her own site with no per-question AI bill.
WORTH KNOWING
A first-hand example of a designer who drew and rigged the character herself and used an AI agent instead of hiring a Rive animator, and who explains why she chose not to use a live AI chatbot. It is her own portfolio piece and self-promotional; the results are her account, the post does not say when the Mac was built, and the article does not name the connector (her X post says Rive MCP).
TRY IT
- Draw and rig the character in Rive yourself before bringing in an agent.
- Describe one movement at a time and say what feels off after each try.
- Test small details like blinks closely; they took several attempts here.
Rates the entry, not the tool.
Source: Lizzie Teo · Lizzie's SubstackOpen as a page
- Work done: not stated in the source (Unverified: her post of 31 Oct 2026 does not say when the Mac was built, only that she went back to it after starting her Michi app.)
- Source published: Oct 31, 2026
- On 4TC: added Nov 2, 2026 · checked Nov 2, 2026
About this source
Type: Portfolio project · Firsthand report · Demonstrated workflow
- Making a Rive character for my portfolio
Lizzie Teo · Lizzie's Substack · Published Oct 31, 2026 (Byline 'Oct 31, 2026'; matches page metadata.) · Checked Nov 2, 2026
Creator's own Substack post. No sponsorship or affiliate links found; it links to her portfolio (self-promotional).
Access: open - I taught myself Rive to bring the old 90s Mac icon on my portfolio to life
Lizzie Teo · X · Published Oct 31, 2026 (Posted 31 Oct 2026.) · Checked Nov 2, 2026
Creator's own X post linking to the article; names the Rive MCP.
Access: X post - Lizzie Teo — Product designer and builder
Lizzie Teo · lizzieteo.com · Publication date not stated (Live site; undated.) · Checked Nov 2, 2026
Creator's live portfolio, where the Mac character runs.
Access: open
Source check: Reviewed by a 4TC editor on Nov 2, 2026. Claims, quotes and dates re-checked against the sources by Ella on 2 Nov 2026. Nobody at 4TC has tested this.
Claims and where they come from
- She traced and drew the Mac in Rive herself and gave it bones, then 'connected Claude to Rive so it could work inside the file with me.' (reported) [1]
- On X she says she made it 'using Claude Code and Rive MCP'. (reported) [2]
- Her loop: 'Claude makes it, I watch, and tell it what feels off, we go back and forth and iterate.' (reported) [1]
- 'The blink had taken a few goes.' The first blink squashed the eyes too flat, so she asked for them to be drawn as lines. (reported) [1]
- 'With Claude Code, I wrote the rules for how the character should react.' The Mac follows the mouse, and its screen lights up in a project's colour when a project card is hovered. (reported) [1]
- She looked into hiring a Rive animator but found 'the good ones were well over my budget', so she taught herself with tutorials and Claude. (reported) [1]
- Her 'Ask Lizzie' chat, where the Mac also sits, 'isn't a real AI chatbot, and that was on purpose'; a small open-source model, all-MiniLM-L6-v2, matches questions to answers she wrote. (reported) [1]
- Claude drafted chat answers from her CV, but 'The first drafts read like a list of achievements, which isn't me at all, so I rewrote them'. (reported) [1]
- When 4TC checked on 2 Nov 2026, lizzieteo.com loaded the Mac's Rive file, and the site's own chat answer says Claude Code 'directed Rive through its MCP server'. (checked by 4TC) [3]
4TC interpretation
Our reading, not something the source says.
Interactive characters usually need a specialist animator. This shows a designer keeping the drawing and rigging in her own hands and using an AI agent for the keyframes and interaction rules, with the result live on her site.
Designer impact
Established [1]
Small animation details can need several rounds with the agent (the blink flattened the eyes into dots).
- Check each movement frame by frame in Rive.
- Describe the fix in visual terms, e.g. draw the eyes as lines.
Established [1]
Claude-drafted copy may not sound like you.
- Rewrite drafts in your own voice, as she did.
Established [1]
A live AI chatbot on a portfolio costs money per question.
- Use pre-written answers with a small on-site model for matching, as she did.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.