A confetti burst you can drop into any celebration: pieces fly from the tap, flip in 3D, drift and fall. Colours, amount, power, gravity and shape all 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 draws every pieceNo keyframes: each piece is a few numbers updated every frame.
- 2Flip without 3DSquashing a piece's width and darkening its back side sells the turn.
- 3Drag, then gravityPieces shoot out fast, slow down in the air, then fall and sway.
- 4Every knob is an inputAmount, power, gravity, shape and five colours, all bound to the view model.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function ConfettiBurst() {
const { rive, RiveComponent } = useRive({
src: '/confetti.riv',
artboard: 'Confetti Burst',
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, power, gravity, shape, color1, color2, color3, color4, color5. All on the Confetti view model.