Holo Card

Cards 220

About

A holographic trading-card surface: pointer-driven 3D tilt with a spring, a rainbow foil sheet whose hue travels with the light, and a contact shadow that leans with the card.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Holo Card to your project and fits it to your theme.

Code

How Holo Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { HoloCard } from "@/components/ui/holo-card";

export default function HoloCardDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      {/* The foil blends with `soft-light` on a light surface, which barely reads
          on white — so the card is pinned to Motiq's dark palette via the public
          `data-theme` hook. The page around it still follows the viewer's theme. */}
      <div data-theme="dark" className="w-[360px] max-w-full">
        <HoloCard maxTilt={16} aspect={1.586}>
          <div className="flex items-start justify-between">
            <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-[var(--motiq-muted,#9caabd)]">
              Motiq
            </span>
            <span className="rounded-full border border-[var(--motiq-border-strong,#354863)] px-2 py-0.5 text-[10px] font-medium text-[var(--motiq-accent-text,#7f9fff)]">
              Foil
            </span>
          </div>

          <div>
            <p className="text-2xl font-semibold tracking-tight text-[var(--motiq-fg,#f8fafc)]">
              Holo Card
            </p>
            <p className="mt-1 text-sm text-[var(--motiq-muted,#9caabd)]">
              Move your pointer across the card.
            </p>
          </div>

          <div className="flex items-center justify-between text-[11px] text-[var(--motiq-muted,#9caabd)]">
            <span className="font-mono tracking-widest">0001 / 2026</span>
            <span>motiq.dev</span>
          </div>
        </HoloCard>
      </div>
    </div>
  );
}