Joshua Comeau crowd-coined the term “boop” (high five, Adam Kuhn). These are sorta like hover/focus states, except that they aren’t. Your thingies — things like links, buttons, etc. — should still have those states. A “boop” is a more whimsical effect that runs once when the mouse enters it, finishes the run even if your mouse leaves (which is something CSS can’t really do), and will potentially run again on the user’s next mouseenter later, after the first booping is done.
Rather than Josh’s React implementation, we’ll start in CSS, see how far we can get, then look at an alternative JavaScript approach.
I’ve left some comments in the Pen above that were from alternative methods we explored along the way.
