An interactive element with intention to surprise and delight all users. Built using the
<canvas> HTML5 element. Users can mouse-over or use a touch screen to "mop up" the spilled beverage to reveal a message underneath. For keyboard and screen reader users, moving focus to the
<canvas> makes a button visable and focusable. Clicking the button clears the "spill" with a small sound effect, then moving focus to the content underneath. This component is intended primarily for 404 pages.
This component includes an mp3 file that may need to be adjusted for in your project. See PropTypes for details.
Describe to screenreader users how the component looks visually. Is the aria-label for the
Applied to outtermost parent div
Diameter for "mopping" to occurd for all device types.
String that is hidden underneath spill, revealed when spill is cleaned up.
You can optionally render the cup as a Starbucks Red Cup during holidays.
If you'd like to add classes to the cup itself
Screen reader instructions to interact with component. Set as aria-label on hidden content button.
The color of the spill in hash format. Should be reflective of a Starbucks beverage.
file-loaderwill load mp3s.