A looping wave that travels through the text: each letter lifts and turns the accent colour as the swell passes, then settles back. Type any word and pick both colours.
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 travelling rangeThe range has an eased peak in the middle, and the animation slides it from one end to the other.
- 2Colour without a colour modifierA second copy of the text in the accent colour is only visible inside the swell.
- 3Any lengthThe range works in fractions of the text, so short and long words both wave.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function WaveText() {
const { rive, RiveComponent } = useRive({
src: '/text-wave.riv',
artboard: 'Wave Text',
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, accent. All on the WaveText view model.