A playful entrance: each letter drops from above, squashes flat as it hits the line and springs back up. Good for game titles, kids apps and anything that should feel bouncy.
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
- 1Gravity is an ease curveThe falling group uses an ease-in curve on its range, so letters speed up as they fall.
- 2Squash, then springTwo more groups follow the landing edge: one squashes, one stretches back up.
- 3Replay from dataThe play trigger drops the letters again.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function LetterDrop() {
const { rive, RiveComponent } = useRive({
src: '/text-drop.riv',
artboard: 'Letter Drop',
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 = 0xFFFF8A5B;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: text, color, play. All on the DropText view model.