The classic hero reveal, done word by word: every word rises from below and fades in a beat after the one before it. Type your headline 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
- 1Words, not lettersThe modifier range counts words, so a long headline still reveals in a few clean steps.
- 2A soft edgeAn eased falloff lets each word fade and rise instead of popping.
- 3Replay from dataThe play trigger restarts the reveal.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function RiseInText() {
const { rive, RiveComponent } = useRive({
src: '/text-rise.riv',
artboard: 'Rise 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 RiseText view model.