Continuous confetti for celebration screens: paper, dots and strips fall, flip and sway. Amount, speed, wind, size, shape and five colours come from data.
Shape
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
- 1One script, no keyframesEvery particle is a few numbers the script updates and draws each frame.
- 2Inputs, not code editsAmount, Speed, Wind, Size, Shape, Colour 1, Colour 2, Colour 3, Colour 4, Colour 5: all view model inputs.
- 3Transparent on purposeThe artboard has no background, so it sits on top of your own design.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function ConfettiRain() {
const { rive, RiveComponent } = useRive({
src: '/confetti-rain.riv',
artboard: 'Confetti Rain',
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('color1').value = 0xFFFF4B6E;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: amount, speed, wind, scale, shape, color1, color2, color3, color4, color5. All on the ConfettiRain view model.