Only a variable font can do this: a pulse travels through the word and each letter swells from thin to heavy as it passes. Type any word and pick the 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
- 1A variation modifierIt drives the font's weight axis per letter instead of moving the letters.
- 2The layout holds stillWeight changes the glyphs, not their positions, so nothing jitters.
- 3One moving rangeThe animation slides an eased range through the text.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function WeightWave() {
const { rive, RiveComponent } = useRive({
src: '/text-weight.riv',
artboard: 'Weight Wave',
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 = 0xFFFAFAF7;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: text, color. All on the WeightText view model.