Direction Aware Hover
Overlay enters from the edge the cursor actually crossed.
- 1.3 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Hover me
Enters from your edge
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/direction-aware-hover.jsonAdds components/velora/direction-aware-hover.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
overlay*Slides in from whichever edge the cursor crossed | React.ReactNode | — |
className | string | — |
Accessibility
- Reduced motion
- The overlay appears and disappears instantly instead of sliding in from the entry edge.
- Keyboard
- The card is focusable (tabIndex 0); keyboard focus on it or on anything inside reveals the overlay, and moving focus out hides it. On touch, a tap toggles the overlay.
- Screen readers
- The overlay is only moved off-canvas, not hidden, so both the base content and the overlay text are read regardless of state.