Reveal Card

Media fills the frame; a caption slides up over it on hover, and is always visible on touch.

cards
card
effect
media
hover
caption

Field notes

Three weeks in the studio.

Quick usage

usage

import { RevealCard } from "@pinky-ui/components";

<RevealCard media={<img src="/cover.jpg" alt="" />} title="Field notes" description="Three weeks in the studio." />

Presets

Default

16:9 media with a hover caption.

Install

Add @pinky-ui/components 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/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add reveal-card

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

Prop	Type	Default	Description
media	ReactNode	—	Required.
title	ReactNode	—	Required.
description	ReactNode	—	Optional.
mediaAspect	"video" \| "square" \| "portrait"	"video"	Aspect ratio of the media frame.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair.

Accessibility

On a device with no hover — checked live via usePointerCapability, never a screen-width guess — the caption is always visible instead of trapped behind an unreachable hover.
The caption also opens on keyboard focus (group-focus-visible), not hover alone.

Reduced motion

The slide-up transition is skipped under prefers-reduced-motion: reduce; on a hover device the caption still opens, just instantly.

When to use

Photography-led previews where the caption is secondary to the image

When not to use

Content where the description needs to be readable at a glance without any interaction — Media Card