loading code fetching the highlighted snippet
FIG-001/ GESTURE
hover + tap gestures.
whileHover and whileTap are temporary animation states that blend in while a pointer is over (or pressing) the element. Release returns to the resting state automatically.
-
whileHovertakes effect when the pointer enters the element and lifts back toanimatewhen it leaves. Here it scales the square to 1.2x — a lift-and-grow common to clickable cards. -
whileTapoverrideswhileHoverwhile the pointer (or touch) is held down — scale 0.8 reads as a press. Release re-applies hover until the pointer leaves. - These overlays compose without any state plumbing — no
$stateflag, no event handlers. Same idea works for opacity, rotation, colour, or any animatable prop.
hover · tap
category · gesture
sheet · sheet 01 / 01
⟳ to re-run