Shift Card

Interactive

A layered card whose front face (title + label) slides and fades up on hover or focus to reveal a detail layer beneath (body + CTA), while the whole card takes a spring-smoothed parallax tilt toward the pointer and a cursor-tracking accent glow. Renders as a link when given an href, reveals fully on keyboard focus-within with a focus-visible ring, and under prefers-reduced-motion drops the tilt and slide for a plain opacity cross-fade.

Inspired by Cult Pro — Shift Cards (pattern) — independently built, not affiliated. Attribution policy

Cohort retention, revenue attribution, and live funnels unified in one surface — hover to look closer.

Read the story

Case studyPrism analytics for realtime funnels

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/shift-card.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/shift-card.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full items-center justify-center p-6">
    <ShiftCard
      className="w-[320px]"
      label="Case study"
      title="Prism analytics for realtime funnels"
      accent="#8b5cf6"
      detail={
        <>
          <p>
            Cohort retention, revenue attribution, and live funnels unified in
            one surface — hover to look closer.
          </p>
          <span className="inline-flex items-center gap-1 font-medium text-[#8b5cf6]">
            Read the story
            <ArrowUpRight className="size-3.5" strokeWidth={2.5} />
          </span>
        </>
      }
    />
  </div>

Props

ShiftCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">

Prop	Type	Default	Description
title*	React.ReactNode	—	Primary heading shown on the resting front face.
label	React.ReactNode	—	Optional short eyebrow shown above the title.
detail*	React.ReactNode	—	The layer revealed beneath the front face — body copy plus a CTA.
href	string	—	When set, the whole card renders as an `<a>` link to this href.
target	React.HTMLAttributeAnchorTarget	—	Anchor target, applied only when `href` is set.
rel	string	—	Anchor rel, applied only when `href` is set.
accent	string	"#8b5cf6"	Accent for the pointer glow, baseline bar, arrow, and focus ring.

npm dependencies

motion