SpilledCoffeeCanvas

Notes

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.

Props

imageDescriptionstring
Describe to screenreader users how the component looks visually. Is the aria-label for the <canvas> element.
classNamestring
Applied to outtermost parent div
eraseDiameternumber[20]
Diameter for "mopping" to occurd for all device types.
hiddenContentstring
String that is hidden underneath spill, revealed when spill is cleaned up.
holidayCupbool[false]
You can optionally render the cup as a Starbucks Red Cup during holidays.
cupClassstring['']
If you'd like to add classes to the cup itself
instructionsstring
Screen reader instructions to interact with component. Set as aria-label on hidden content button.
spillColorstring
The color of the spill in hash format. Should be reflective of a Starbucks beverage.
cleanUpSoundany
A sound, powered by JavaScript's Audio API. You'll need to add the file type to your bundler so it can read it. If using Webpack, file-loader will load mp3s.

<SpilledCoffeeCanvas
      className="bg-white"
      spillColor="#D7C2AB"
      imageDescription="Spilled latte beverage with tipped over Starbucks cup next to it."
      hiddenContent="Java nice day!"
      instructions="Mop up the spill to reveal something underneath"
    />

SpilledCoffeeCanvas

Notes

Props

Example: Sample 404 Page