Grow a character
that evolves with your users.
Kaiju hatches when your user checks in, grows up after a 30-day streak and roars at the next check-in. Each stage is a state in his state machine, and every move between stages is an animation Masko made.
What Masko made
One loop for each stage and one animation for each move. Hover a clip to play it.
- Eggloop
- Hatchegg → baby, on checkIn
- Babyloop
- Grow upbaby → adult, at streakDays ≥ 30
- Adultloop
- Roaradult → roar, on checkIn
- Roaringloop
How it works
- 1
Make the character and each stage
Create Kaiju from a prompt or a picture, then make each stage as an image of the same character: the egg, the baby and the adult.
Create a mascot - 2
Connect the stages in a state graph
Each stage is a node with its own loop. Each arrow is a move with the input that triggers it: checkIn hatches the egg, and streakDays ≥ 30 grows him up.
Build a canvas - 3
Let Masko animate it, then play it in your app
Generate all makes every loop and every move. Export the canvas to get the nodes, edges, inputs and transparent videos, and play the next clip when an input changes.
Export a canvas
The moves on Kaiju’s canvas
{
"inputs": ["action::checkIn", "context::streakDays"],
"edges": [
{ "id": "egg-to-baby",
"conditions": [{ "input": "action::checkIn", "op": "==", "value": true }] },
{ "id": "baby-to-adult",
"conditions": [{ "input": "context::streakDays", "op": ">=", "value": 30 }] },
{ "id": "adult-to-roar",
"conditions": [{ "input": "action::checkIn", "op": "==", "value": true }] }
]
}Questions
What makes Kaiju evolve?
Inputs from your app. He hatches on checkIn, grows up when streakDays reaches 30 and roars on the next checkIn. You choose the inputs and the condition on each arrow.
Can a character have more stages?
Yes. Add a node for each stage and an arrow between them. Each new move is one more animation, and a move played backwards is free.
How much did Kaiju cost?
138 credits: 22 to explore his look, 6 for the stage images, 90 for nine animations and 20 to redo two roar clips. His full canvas also has a hover between check-ins.
Where can it play?
Anywhere a transparent video plays. The export gives WebM for Chrome and Firefox and HEVC for Safari and iOS, and the playback guide covers Android.