A round Duolingo-style play button: the circle sinks onto its darker lip while pressed and springs back on release. One colour drives the face and the lip, and the icon has its own colour.
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
- 1Two circlesThe face sits on a second circle moved down 9 points: that gap is the 3D lip.
- 2One colour, two tonesThe lip is the same colour with a dark layer on top.
- 3Press is one booleanPointer listeners write down, and the state machine drops the face onto the lip.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function DuoCircleButton() {
const { rive, RiveComponent } = useRive({
src: '/duo-circle.riv',
artboard: 'Duo Circle Button',
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('color').value = 0xFF58CC02;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: color, iconColor. All on the DuoCircle view model.