A glitch that doesn't nag: the word sits still, then every few seconds slices of it jump sideways and a red and a cyan ghost split off behind it before it snaps back. All three colours are inputs.
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
- 1Slices are rangesTwo modifier ranges pick chunks of the word and shove them sideways for a few frames.
- 2Ghosts are copiesTwo tinted copies of the text jump the other way, behind the main one.
- 3Hold keysEvery key holds instead of easing, so the tears snap like a bad signal.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function GlitchText() {
const { rive, RiveComponent } = useRive({
src: '/text-glitch.riv',
artboard: 'Glitch 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, ghost1, ghost2. All on the GlitchText view model.