The visor screen from our Cyber Monday robot on its own: a 13 by 7 grid of square pixels that draws a face. Pick happy, wink, love, surprised, sad, angry, sleepy or talking from data and only the pixels that change flip to the new face. It blinks on its own, and the react trigger flashes a surprised face with a little shake. Every colour, from the lit pixels to the frame, comes from data.
Expression
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1One string picks the faceSet expression to a face name. Each face is a one frame timeline that sets every pixel on or off.
- 2Only changed pixels flipThe state machine blends from one face to the next with a little overshoot, so pixels that stay lit never move.
- 3Blink and react on their own layersAn idle layer squeezes the eye rows now and then, and the react trigger plays a surprised face and a shake, then goes back to your face.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function RobotFace() {
const { rive, RiveComponent } = useRive({
src: '/robot-face.riv',
artboard: 'Robot Face',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('lit').value = 0xFF52FCFB;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: expression, react, lit, accent, unlit, screen, frame. All on the RobotFace view model.