@jarvis-ui
GitHub

Parallax Card

A generic card with pointer-driven tilt, glare, and parallax motion.

Mission Control

Orbital telemetry

Orbit

LEO

Speed

7.8k

Signal

98%

Installation

npx shadcn@latest add https://ui.jarv.is/r/parallax-card.json

Usage

Basic card

Use parallax card to add subtle pointer-driven depth to any card contents.

import { ParallaxCard } from "@/components/ui/parallax-card";

export function Example() {
  return (
    <ParallaxCard className="max-w-sm">
      <div className="p-6">
        <h3 className="font-medium">Launch Window</h3>
        <p className="mt-2 text-sm text-muted-foreground">
          Add your own content and keep the motion shell reusable.
        </p>
      </div>
    </ParallaxCard>
  );
}

Tune the motion

Lower the tilt and hover scale for dense product cards, or increase them for expressive marketing surfaces.

import { ParallaxCard } from "@/components/ui/parallax-card";

export function ProductMetricCard() {
  return (
    <ParallaxCard maxTilt={4} scale={1.01} parallaxShift={3} className="max-w-sm">
      <div className="p-5">
        <p className="text-sm text-muted-foreground">Pipeline health</p>
        <p className="mt-2 text-3xl font-semibold">98.4%</p>
      </div>
    </ParallaxCard>
  );
}

Disable motion

Set disabled when the same card needs to render in a static context such as a print view, thumbnail grid, or automated screenshot.

import { ParallaxCard } from "@/components/ui/parallax-card";

export function StaticPreviewCard() {
  return (
    <ParallaxCard disabled glare={false} className="max-w-sm">
      <div className="p-6">Static preview</div>
    </ParallaxCard>
  );
}

Custom layers

Use the content and glare class hooks when the card needs tighter art direction.

import { ParallaxCard } from "@/components/ui/parallax-card";

export function ArtworkCard() {
  return (
    <ParallaxCard
      contentClassName="scale-[1.06]"
      glareClassName="mix-blend-screen"
      glareMaxOpacity={0.24}
      className="max-w-sm"
    >
      <div className="min-h-64 bg-zinc-950 p-6 text-white">Campaign artwork</div>
    </ParallaxCard>
  );
}