Stami Studios sells, amongst other things, a lucky dip bag that contains a random selection from one of their collections. They wanted to enhance the purchase experience by taking inspiration from the coin-operated vending machines that dispense random toys in a plastic capsule.
I set out to build a solution that would allow the user to interact with a virtual vending machine and receive a random selection from a collection. The solution would also need to be seamlessly integrated into their existing store. I wanted to take the simplest route possible:
- A single SVG containing the vending machine and the capsules.
- D3.js to handle the animations and interactions.
If you just want to see the final result, you can see it here.
The SVG was designed by Stami Studios and contained all the visual elements of the experience. This was created with Adobe Illustrator and exported as SVG. Importantly, key elements were grouped into named layers to allow for easy manipulation with D3.js, as the layer names are used as the element IDs.
Implementing the animations was straight-forward with the D3.js
transition() method, which allows for multiple animations to be chained together. The different animations are:
- A help message to the user, indicating that they can turn the knob on the machine. This faded in and out until interaction.
- The knob would then rotate 180 degrees and lock, preventing further interaction.
- The capsules in the machine would shake to indicate something is happening.
- The capsule would then be dispensed from the machine and fall into the capsule tray.
- The capsule would then shoot off into the top right of the screen, towards the shopping cart icon.
Interactions with the store
The final result
Here's a demo of the final result:
To see it in action, visit Stami Studios.