Component
HoverRoute
It moves its children through four hover zones, resets when you skip ahead, and settles in the middle after the full route is completed.
01 / Preview
Try it yourself.
Release this carefully
Hover steps 1 through 4 in order. Skipping ahead sends the content back to the start.
Mechanism
- 1
- Start with the content waiting above the route.
- 2
- Hover each numbered zone in sequence.
- 3
- Skip ahead and the progress returns to zero.
- 4
- Complete the route and the content settles in the middle.
02 / Usage
Put it somewhere.
example.tsxTSX
import { HoverRoute } from "gra-ui";
import "gra-ui/styles.css";
export function DeliberateRelease() {
return <HoverRoute>Release this carefully</HoverRoute>;
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe content moved along the fixed four-step route.