purrfect uiComponents

Mapping the old town

A walk through the lanes nobody has drawn yet, with a map at the end.

Sat, 12 Oct · 10:00Old Town Square

Night ride

Ten kilometres of lit streets, a group pace and a stop for chai.

Fri, 18 Oct · 21:00

Peek card

A card whose image zooms and info panel slides up on hover, with a wide row variant.

Behaviour

  • The card fades up once as it scrolls into view.
  • Hover zooms the image to 1.1 and slides the panel up from 52%; the description and meta fade in after 0.1s and 0.15s. An asterisk spins in the panel.
  • Row variant: the up-right arrow scales from 0.8 and fades in on hover; muted dims the row and keeps the arrow showing.
  • Touch shows the panel open and the arrow visible; keyboard focus opens it too. All CSS, no re-render on hover.
  • Reduced motion: no fade-up travel, no zoom, no spin, and the panel's details fade in place instead of sliding.

Props

PropTypeDescription
imagestring | ReactNodeAn image URL, or any node (gradient, video) that fills the media area.
imgPropsImgHTMLAttributesExtra attributes for the <img> when image is a URL (alt, loading, sizes).
titleReactNodeThe heading; with href it is the link text and the whole card is clickable.
descriptionReactNodeFades in once the panel opens.
metaReactNodeSmall lines under the description (date, place, status).
indexnumber | stringThe big number top-left (bottom-left of the image in a row).
hrefstringMakes the whole card a link.
variant"card" | "row"default "card"A tall card with a peeking panel, or a wide row with an arrow.
mutedbooleandefault falseA past or closed item: dimmed, the arrow stays put.

Installation

npx shadcn@latest add https://purrfectui.com/r/peek-card.json

How to use

import { PeekCard } from "@/components/ui/peek-card";

<PeekCard index={1} image="/event.jpg" title="Mapping the old town" description="A walk through the lanes." meta="Sat, 12 Oct" href="/events/old-town" />
<PeekCard variant="row" muted image="/past.jpg" title="Last month's meetup" meta={<span>Closed</span>} href="/events/past" />

Source code

Loading…

Credits

Ported from mapinly.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.

0