An entrance for titles and labels: each letter pops in after the one before it, overshoots a little and settles, like a sticker slapped on. Type any words 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
- 1Two modifier groupsOne keeps the letters hidden and tiny, the other scales the letters that just landed past full size.
- 2One timeline, one numberThe animation only slides the range offset across the text, so it works on any word.
- 3Replay from dataThe play trigger restarts the entrance from the first letter.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function PopInText() {
const { rive, RiveComponent } = useRive({
src: '/text-pop.riv',
artboard: 'Pop-In 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, play. All on the PopText view model.