Project Description:
A high-quality drawn human-like avatar is needed for an interactive web widget. This is not a static image and not
a simple CSS animation. A lively animated character in Rive is required: the avatar looks at the user, blinks,
slightly moves its head, reacts to different interface states, and can move its mouth while speaking/narrating.
Style: modern, clean, friendly, human-like, resembling a high-quality digital illustration / product
mascot. 3D is not needed, photorealism is not needed, and a childish cartoon style is not needed.
Main task:
Create one basic Rive rig human avatar that can be customized: name, brand color, hair, color
of hair, face, clothing, color of clothing, eye color, skin tone, accessories. In the future, based on this rig, it is planned
to create a library of 10-20 avatars.
What should be the result:
1. Source file .riv.
2. Exported .riv, ready for web runtime.
3. All rights for commercial use must be transferred to us.
4. No use of third-party copyrighted assets, other characters, or copies of existing services.
5. The avatar must work through Rive runtime in the browser.
6. The file must be optimized for the web widget: load quickly, without heavy textures and external dependencies.
Mandatory character customization:
The avatar must support switching options through Rive inputs / state machine / data binding:
- Skin tone: at least 6 options.
- Face shape: at least 3 options.
- Hair style: at least 8 options.
- Hair color: at least 10 options.
- Eye color: at least 6 options.
- Eyebrow style/color: separately or linked with hair color.
- Outfit style: at least 5 options.
- Outfit color: at least 10 options.
- Brand accent color: at least 10 options or a controlled color.
- Accessories: at least 5 options, such as glasses, headset, earrings, no accessory.
- Optional: background glow / ring / online badge color.
If it is inconvenient to pass HEX colors directly in Rive, palette indexes can be made: hairColorIndex,
outfitColorIndex, brandColorIndex, skinToneIndex.
Avatar states:
A Rive State Machine with clear inputs is needed. The name of the state machine: AvatarStateMachine.
Mandatory states:
- idle — calm waiting, light breathing, micro-movements of the head.
- greeting — a short greeting / wave / smile.
- active — the avatar is in an active state.
- listening — the avatar is listening attentively.
- thinking — a short reaction of waiting.
- speaking — the avatar is speaking, active mouth animation.
- handoff — neutral transition state.
- offline — calm turned-off state.
- error — soft error, without aggressive animation.
Mandatory facial animations:
- Natural blinking.
- Eye movement / subtle look around.
- Smile / neutral / focused expressions.
- Head nod.
- Small head turn left/right.
- Mouth movement for speaking.
- Smooth transition between states.
- No "jumping up and down" as the main animation. A lively facial expression is needed.
Lip sync / mouth rig:
Lip sync support is needed. The minimum option: input mouthOpen or volume, which opens the mouth based on the level
of volume.
Ideal option: viseme inputs:
viseme_0 ... viseme_21: number 0-1
isSpeaking: boolean
volume: number 0-1
If a full viseme rig is too expensive, a separate price should be given for simple volume mouth and full viseme mouth.
Rive inputs that must be documented:
isActive: boolean
isListening: boolean
isThinking: boolean
isSpeaking: boolean
isOnline: boolean
isMuted: boolean
isError: boolean
greet: trigger
wave: trigger
nod: trigger
smile: trigger
handoff: trigger
volume: number 0-1
lookX: number -1 to 1
lookY: number -1 to 1
skinToneIndex: number
faceShapeIndex: number
hairStyleIndex: number
hairColorIndex: number
eyeColorIndex: number
outfitStyleIndex: number
outfitColorIndex: number
accessoryIndex: number
brandColorIndex: number
Artboards / sizes:
At least 3 artboards are needed:
1. WidgetAvatar — square avatar for web widget, 512x512 or scalable vector.
2. LargeAvatar — large bust/portrait avatar for demo screen.
3. AvatarOnlyTransparent — only the character on a transparent background.
The avatar should look good in a small size of about 160x160 px and in a large size of about 500x500
px.
Design quality:
The character should be pleasant, modern, human-like. A primitive flat icon style is not needed. A strange
cartoon face is not needed. A generic stock avatar is not needed. The face should look neat: normal proportions, pleasant
eyes, quality hair, neat clothing.
Before the final animation, a static concept must first be agreed upon: 2-3 options for face/style. After approving
one option, the rig and animation should be done.
Work stages:
1. Moodboard / style proposal.
2. 2-3 static avatar concepts.
3. Approval of one concept.
4. Creation of Rive rig.
5. Adding customization.
6. Adding state machine.
7. Adding facial animations.
8. Adding mouth rig / lip sync.
9. File optimization.
10. Transfer of .riv, documentation on inputs, and a short demo HTML/preview.
Acceptance criteria:
- The avatar looks professional and human-like.
- All states switch through the Rive State Machine.
- Hair, hair color, skin tone, eyes, clothing, brand color can be changed.
- There are idle, active, listening, thinking, speaking animations.
- The mouth moves during speaking.
- The facial animation is lively, not just the whole body moving up and down.
- .riv works in web runtime.
- The file does not contain third-party copyrighted assets.
- Commercial rights have been transferred.
- There is a short documentation: list of inputs, artboards, states, how to change options.
Behance
