Text that types itself at an uneven, human pace, then leaves a blinking caret at the end. Type any sentence; the caret colour is its own input.
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 hard-edged rangeNo falloff, so every character is either typed or not.
- 2Human paceThe reveal is keyed with small pauses instead of one straight line.
- 3The caret is a second runIt waits until the line is typed, then a separate layer blinks it.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function Typewriter() {
const { rive, RiveComponent } = useRive({
src: '/text-type.riv',
artboard: 'Typewriter',
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, caret, play. All on the TypeText view model.