Skip to content
Pinky UI

collections

Directional Card Reveal

A card's secondary surface enters from the side where the pointer arrived, making spatial intent part of the reveal.

  • collections
  • card
  • direction
  • reveal
  • focus
Related pattern

One directional reveal system; direction is an interaction signal, not four cosmetic variants.

Live preview

Quick usage

usage
import { DirectionalCardReveal } from "@pinky-ui/systems";

<DirectionalCardReveal label="Open project" reveal={<ProjectMeta />}>...</DirectionalCardReveal>

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
revealReactNode—Secondary card content revealed from the meaningful entry edge.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Direction is sampled once on entry; the reveal uses a clipped transform surface.
  • The focused and touch states use a stable bottom entry fallback.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Cards where the relationship between entry direction and secondary content has meaning

When not to use

  • Generic hover elevation or cards with interactive controls inside the surface

Skill

Purpose

Use one directional reveal when the entry edge communicates how a card's secondary surface should arrive. Direction is sampled as an interaction signal; it is not four cosmetic variants.

Interaction anatomy

  • Pointer entry chooses the nearest card edge.
  • The secondary surface reveals from that edge.
  • Focus and touch use a stable bottom-entry fallback.

Good for

Project cards, spatial annotations and compact previews where arrival direction has meaning.

Avoid

Generic hover lift, cards containing nested controls or content that must be visible without activation.

Usage

tsx
<DirectionalCardReveal
  label="Open the project summary"
  reveal={<ProjectMeta />}
>
  <ProjectSummary />
</DirectionalCardReveal>

Tune

Keep the reveal surface short and preserve the card's core label in the resting DOM. Sample direction once on entry and use a clipped surface instead of a pointer loop.

Accessibility and reduced motion

The card is a labelled button with aria-expanded; Enter, Space, focus and touch all reveal the content. Reduced motion removes clip travel while keeping the revealed state explicit.

Open this skill on its own page