Rainy's eyes from the Masterclass character: big round eyes with a heavy lid. The pupils follow the cursor or finger, and the lid drops for a blink at random and on cue. Iris and lid colours come from data.
Design
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
- 1A listener moves a targetA pointer move listener aligns an invisible target to the cursor or finger.
- 2Constraints do the lookingA translation constraint pulls each pupil toward the target, and a distance constraint keeps it near the centre of the eye.
- 3A blink that never repeatsRandom waits of 1.2, 2.6 or 4.5 seconds between blinks, one in four doubled, plus a trigger for a blink on cue.
- 4Five styles, one fileEach eye type is its own artboard, swapped through an artboard property in the view model.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function EyesThatFollow() {
const { rive, RiveComponent } = useRive({
src: '/sleepy-eyes.riv',
artboard: 'Eyes That Follow',
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('iris').value = 0xFF4DA6FF;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: iris, lid, blink. All on the Eyes view model.