Lens Card

Cards 83

About

A magnifying lens that follows the cursor across a live surface, with chromatic fringing and grid bend at the rim — then drifts on its own when you leave.

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

Code

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

Usage.tsx

"use client";

import { LensCard } from "@/components/ui/lens-card";

const STATS = [
  { label: "Latency p95", value: "128", unit: "ms", note: "▼ 11% wk/wk" },
  { label: "Throughput", value: "4.2", unit: "k rps", note: "▲ 6.3% wk/wk" },
  { label: "Error budget", value: "91", unit: "%", note: "21d left" },
  { label: "Active regions", value: "12", unit: "/14", note: "iad + syd draining" },
  { label: "Queue depth", value: "341", unit: "", note: "▼ draining 84/s" },
  { label: "Spend / day", value: "212", unit: "USD", note: "▲ 3.1% vs avg" },
];

export default function LensCardDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <LensCard
        className="w-full max-w-2xl rounded-2xl border border-[var(--motiq-border)] bg-[var(--motiq-surface)] p-6"
        radius={120}
        magnification={1.35}
        chromatic={0.6}
        gridBend
        idleDrift
        showRing
      >
        <div className="grid grid-cols-3 gap-3">
          {STATS.map((s) => (
            <div
              key={s.label}
              className="rounded-xl border border-[var(--motiq-border)] bg-[var(--motiq-surface-2)] p-3"
            >
              <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--motiq-muted)]">
                {s.label}
              </p>
              <p className="mt-1 text-2xl font-semibold tracking-tight text-[var(--motiq-fg)]">
                {s.value}
                <span className="ml-1 text-xs font-normal text-[var(--motiq-muted)]">{s.unit}</span>
              </p>
              <p className="mt-0.5 text-[11px] text-[var(--motiq-accent-text)]">{s.note}</p>
            </div>
          ))}
        </div>
      </LensCard>
    </div>
  );
}