A gift box that opens on tap: the box squashes, the lid jumps off and lands against it, and confetti bursts out. Eight designs, any colours, all from data binding.
Design
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
- 1Box and lid are two artboardsSwap either one for your own art. The animation moves the placement, not the drawing.
- 2One colour per partEvery shape is a bound colour plus a shade layer, so any colour keeps the shading.
- 3A tap flips one booleanOpen and closed are two states. The same boolean is yours to set from code.
- 4Confetti is a scriptA small Node Script fires a burst every time the box opens.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function GiftBox() {
const { rive, RiveComponent } = useRive({
src: '/gift-box.riv',
artboard: 'Gift Box',
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('box').value = 0xFFEEB14E;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: box, ribbon, open. All on the GiftBox view model.