Customization
AI visuals can be customized to match your brand and design requirements.
Color customization
For visuals that support custom colors, you need to use useViewModel, useViewModelInstance and useViewModelInstanceColor.
viewModeltake the rive instance, anduseDefaultis set totrueto use the default view model.viewModelInstancetakes the previousviewModel, the rive instance, anduseDefaultis set totrueto use the default view model instance.useViewModelInstanceColortakes the name of the color input (simply'color') and theviewModelInstance.useViewModelInstanceColorexposes asetRgbfunction that allows you to set the color using RGB values with the formatsetRgb(r: number, g: number, b: number).
Basic example below. You can find a more complete example on GitHub.
import {
useRive,
useViewModel,
useViewModelInstance,
useViewModelInstanceColor
} from '@rive-app/react-webgl2';
export function CustomColorVisual() {
const { rive, RiveComponent } = useRive({
src: '/glint-2.0.riv',
stateMachines: 'default',
autoplay: true,
});
const viewModel = useViewModel(rive, { useDefault: true });
const viewModelInstance = useViewModelInstance(viewModel, {
rive,
useDefault: true,
});
const { setRgb } = useViewModelInstanceColor('color', viewModelInstance);
const setCustomColor = (r: number, g: number, b: number) => {
if (setRgb) {
setRgb(r, g, b);
}
};
return (
<div>
<RiveComponent className="w-32 h-32" />
<button onClick={() => setCustomColor(124, 41, 216)}>
Set Purple
</button>
</div>
);
}Legacy color modes
Some visuals support predefined color modes. This is common among v1.0 products but was replaced with the v2.0 releases.
const colorModeInput = useStateMachineInput(rive, 'default', 'color');
const setColorMode = (mode: number) => {
if (colorModeInput) {
colorModeInput.value = mode; // 0-8 for different colors
}
};File customization
Each purchase includes:
.riv- Runtime file for your application.rev- Source file that can be opened with the Rive Editor to apply further customizations
Learn to use the Rive Editor with the Rive documentation, starting with the Rive 101 video series.