Direction-aware Card

A hover card whose overlay slides in from the side the cursor entered, with cover and push variants.

Loading preview…

npx shadcn@latest add https://webberui.com/r/direction-aware-card.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Animation stylevariant

Duration (s)duration

0.4

<DirectionAwareCard />

Installation

npx shadcn@latest add https://webberui.com/r/direction-aware-card.json

Or, once registries are configured in components.json, install it as @webberui/direction-aware-card.

Usage

import { DirectionAwareCard } from "@/components/ui/direction-aware-card";

<DirectionAwareCard
  className="h-56 w-44"
  overlay={
    <>
      <p className="text-sm font-semibold">Explore now</p>
      <p className="text-xs opacity-80">The overlay slides in from the side the cursor entered</p>
    </>
  }
>
  <div className="flex h-full items-end p-4">
    <p className="text-sm font-medium">Card title</p>
  </div>
</DirectionAwareCard>

The overlay detects which side — top, bottom, left, or right — the cursor entered the card from and slides in along that side; on leave it slides back out toward the side the cursor left by.

Props

DirectionAwareCard inherits every native <div> attribute and adds:

Prop	Type	Default	Description
`overlay`	`React.ReactNode`	—	Overlay content revealed on hover / focus
`children`	`React.ReactNode`	—	The base content shown at rest
`variant`	`"cover" \| "push"`	`"cover"`	`cover` lays the overlay over the base content; `push` shoves the base content out in the same direction as the overlay slides in
`duration`	`number`	`0.4`	How long the overlay takes to slide in / out (seconds)
`overlayClassName`	`string`	—	Appended to the overlay, so you can override the default background and centered layout
`className`	`string`	—	Appended to the outermost card container

How it works

The entry direction is derived from the cursor's angle relative to the card center, normalizing the longer edge by the shorter one, so the judgement still matches visual intuition on extreme aspect ratios.
The "entry side" is recorded on enter and replaced by the "exit side" on leave, so the overlay always enters and exits along the side the cursor actually crossed.
The outermost element uses overflow-hidden to clip the sliding overlay and base content; the push variant works through transform offsets, so it never affects layout height.

Accessibility

Focusing the card with Tab (focus-visible) reveals the overlay as well, so links and buttons inside it can be operated with the keyboard.
While hidden, the overlay carries inert, which removes it from the tab order and hides it from assistive technology, avoiding elements that are invisible yet focusable.
When the user has "reduce motion" enabled at the system level, the directional slide degrades to a plain fade in / fade out with no sense of displacement.