"use client"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; import { recordReceiptEvent } from "@/libs/receipt/session"; type Phase = "idle" | "sealing" | "flying" | "sent"; const MESSAGE_MAX = 2000; const PAPER = "#faf4e6"; /** Fine paper grain, laid over the whole card so perforations blend in. */ const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); /** Accepts an email, an @handle, or anything that parses as a URL host. */ function isDigitalAddress(value: string) { if (/^@[A-Za-z0-9._-]{1,40}$/.test(value)) return true; if (/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value)) return true; try { const url = new URL(/^https?:\/\//i.test(value) ? value : `https://${value}`); return url.hostname.includes(".") && !url.hostname.endsWith("."); } catch { return false; } } /** * Downscale to a sane size before upload. Re-encoding through canvas also * drops EXIF, so nobody accidentally mails their GPS coordinates. * Falls back to the original file if the browser can't decode it (e.g. HEIC). */ async function prepareStamp(file: File): Promise { try { const bitmap = await createImageBitmap(file); const scale = Math.min(1, 1400 / Math.max(bitmap.width, bitmap.height)); const width = Math.round(bitmap.width * scale); const height = Math.round(bitmap.height * scale); const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); if (!ctx) return file; ctx.drawImage(bitmap, 0, 0, width, height); bitmap.close?.(); const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.86), ); if (!blob) return file; return new File([blob], "stamp.jpg", { type: "image/jpeg" }); } catch { return file; } } export default function Postcard() { const reduceMotion = useReducedMotion(); const cardRef = useRef(null); const fileInputRef = useRef(null); const previewUrlRef = useRef(null); const [name, setName] = useState(""); const [address, setAddress] = useState(""); const [message, setMessage] = useState(""); const [stampFile, setStampFile] = useState(null); const [stampPreview, setStampPreview] = useState(null); const [phase, setPhase] = useState("idle"); const [sealed, setSealed] = useState(false); const [error, setError] = useState(null); const [cardSize, setCardSize] = useState({ width: 560, height: 350 }); // Untransformed layout size of the card — the envelope is sized to fit it. useLayoutEffect(() => { const node = cardRef.current; if (!node) return; // offsetWidth/Height, not getBoundingClientRect: the card gets scaled // during the send animation and we want its layout size, not the drawn one. const measure = () => { const { offsetWidth: width, offsetHeight: height } = node; if (width > 0 && height > 0) setCardSize({ width, height }); }; measure(); const observer = new ResizeObserver(() => measure()); observer.observe(node); return () => observer.disconnect(); }, []); useEffect( () => () => { if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current); }, [], ); // Classic 1.75:1 envelope when the card is landscape (desktop); taller when // the card stacks into a portrait shape (mobile), so it can still fit inside. const cardRatio = cardSize.height / Math.max(cardSize.width, 1); const envelopeWidth = Math.min(380, Math.max(220, cardSize.width * 0.84)); const envelopeHeight = envelopeWidth * Math.min(1.2, Math.max(0.572, cardRatio * 1.12)); const tuckedScale = Math.min( (envelopeWidth * 0.88) / Math.max(cardSize.width, 1), (envelopeHeight * 0.9) / Math.max(cardSize.height, 1), ); const busy = phase === "sealing" || phase === "flying"; async function handlePickStamp(event: React.ChangeEvent) { const file = event.target.files?.[0]; // Allow re-picking the same photo. event.target.value = ""; if (!file) return; if (!file.type.startsWith("image/")) { setError("That file isn't an image."); return; } setError(null); // Resize now rather than on send, so posting stays instant. const prepared = await prepareStamp(file); if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current); const url = URL.createObjectURL(prepared); previewUrlRef.current = url; setStampFile(prepared); setStampPreview(url); } function clearStamp() { if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current); previewUrlRef.current = null; setStampFile(null); setStampPreview(null); } function resetCard() { clearStamp(); setName(""); setAddress(""); setMessage(""); setError(null); setSealed(false); setPhase("idle"); } async function handleSend(event: React.FormEvent) { event.preventDefault(); if (busy) return; if (!message.trim()) { setError("Write something first — even one line counts."); return; } if (!name.trim()) { setError("Sign it, please — a first name is plenty."); return; } if (!address.trim()) { setError("Add your digital address so I can write back."); return; } if (!isDigitalAddress(address.trim())) { setError("Use an email, an @handle, or a link."); return; } setError(null); setPhase("sealing"); const form = new FormData(); form.set("message", message.trim()); form.set("address", address.trim()); form.set("name", name.trim()); // Already resized when it was picked. if (stampFile) form.set("stamp", stampFile); const request = fetch("/api/postcard", { method: "POST", body: form }); if (!reduceMotion) { // Card slides in, flap swings shut and gets sealed, then it flies off. await wait(1250); setSealed(true); await wait(800); setPhase("flying"); await wait(850); } try { const response = await request; if (!response.ok) { const body = (await response.json().catch(() => null)) as | { error?: string } | null; throw new Error(body?.error || "Something went wrong."); } recordReceiptEvent("pc"); setPhase("sent"); } catch (err) { setSealed(false); setPhase("idle"); setError( err instanceof Error ? err.message : "The postcard didn't go through.", ); } } const cardAnimation = phase === "idle" ? { scale: 1, y: 0, rotate: -0.5 } : phase === "sealing" ? { scale: [1, tuckedScale, tuckedScale], y: [0, -envelopeHeight * 0.8, 6], rotate: [-0.5, 0, 0], } : { scale: tuckedScale, y: 6, rotate: 0 }; return (

{phase === "sent" ? ( ) : (

{phase !== "idle" ? ( ) : null} fileInputRef.current?.click()} onStampClear={clearStamp} disabled={busy} /> {phase !== "idle" ? ( <> ) : null}

{/* Honeypot */}

{message.trim().length > 0 ? `${message.trim().length}/${MESSAGE_MAX} characters` : "goes straight to my inbox — no newsletter, no mailing list."}

{error ? (

{error}

) : null}

)}

); } function CardFace({ cardRef, name, address, message, stampPreview, onName, onAddress, onMessage, onStampClick, onStampClear, disabled, }: { cardRef: React.RefObject; name: string; address: string; message: string; stampPreview: string | null; onName: (value: string) => void; onAddress: (value: string) => void; onMessage: (value: string) => void; onStampClick: () => void; onStampClear: () => void; disabled: boolean; }) { return (

{/* Worn edge + card border */}

{/* Masthead */}

Post Card

wahabshaikh.com · correspondence

{/* Message half */}

Message

onMessage(event.target.value.slice(0, MESSAGE_MAX))}
              disabled={disabled}
              rows={9}
              placeholder="Salam Wahab…"
              className="w-full resize-none bg-transparent font-hand text-[19px] text-[#2f2a20] outline-none placeholder:text-[#a89a7c] focus:outline-none"
              style={{
                lineHeight: "28px",
                backgroundImage:
                  "repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, rgba(125,105,65,0.30) 27px, rgba(125,105,65,0.30) 28px)",
                backgroundAttachment: "local",
              }}
            />
          </div>

{/* Address half */}
          <div className="relative flex flex-col sm:pl-6">
            {/* Divider, on the column boundary */}
            <span
              className="pointer-events-none absolute inset-y-0 left-0 hidden w-px sm:block"
              style={{
                background:
                  "repeating-linear-gradient(to bottom, rgba(120,100,60,0.38) 0 5px, transparent 5px 10px)",
              }}
              aria-hidden="true"
            />
            <div className="flex items-start justify-between gap-3">
              <p className="max-w-[9rem] font-mono text-[9px] leading-[1.6] tracking-[0.16em] text-ink-400 uppercase">
                To
                <span className="mt-1 block font-sans text-[11.5px] tracking-normal text-ink-700 normal-case">
                  Wahab Shaikh
                  <br />
                  Mumbai, India
                </span>
              </p>
              <StampSlot
                preview={stampPreview}
                onClick={onStampClick}
                onClear={onStampClear}
                disabled={disabled}
              />
            </div>

<div className="mt-5 space-y-3 sm:mt-auto sm:pt-6">
              <p className="font-mono text-[9px] tracking-[0.2em] text-ink-400 uppercase">
                From · your digital address
              </p>
              <RuledInput
                id="postcard-name"
                label="Name"
                value={name}
                onChange={onName}
                placeholder="who's writing?"
                disabled={disabled}
                maxLength={80}
                required
              />
              <RuledInput
                id="postcard-address"
                label="Email, @handle or link"
                value={address}
                onChange={onAddress}
                placeholder="you@email.com"
                disabled={disabled}
                maxLength={200}
                inputMode="email"
                required
              />
            </div>
          </div>
        </div>
      </div>

{/* Grain */}
      <div
        className="pointer-events-none absolute inset-0 z-20 opacity-[0.055] mix-blend-multiply"
        style={{ backgroundImage: GRAIN }}
        aria-hidden="true"
      />
    </div>
  );
}

{/* Perforations, punched in the card's paper colour */}
        <Perforations />

{preview ? <Postmark /> : null}
      </button>

{preview && !disabled ? (
        <button
          type="button"
          onClick={onClear}
          disabled={disabled}
          aria-label="Remove the stamp photo"
          className="absolute -top-2 -right-2 z-20 flex h-5 w-5 items-center justify-center rounded-full bg-ink-900 text-[11px] leading-none text-background shadow-sm transition-colors hover:bg-clay"
        >
          ×
        </button>
      ) : null}
    </div>
  );
}

function Perforations() {
  const dots = "radial-gradient(circle, var(--paper) 4.2px, transparent 4.6px)";
  return (
    <>
      <span
        className="pointer-events-none absolute -top-[5.5px] right-0 left-0 z-10 h-[11px]"
        style={{ backgroundImage: dots, backgroundSize: "11px 11px" }}
        aria-hidden="true"
      />
      <span
        className="pointer-events-none absolute right-0 -bottom-[5.5px] left-0 z-10 h-[11px]"
        style={{ backgroundImage: dots, backgroundSize: "11px 11px" }}
        aria-hidden="true"
      />
      <span
        className="pointer-events-none absolute -left-[5.5px] z-10 w-[11px]"
        style={{
          top: "-5.5px",
          bottom: "-5.5px",
          backgroundImage: dots,
          backgroundSize: "11px 11px",
        }}
        aria-hidden="true"
      />
      <span
        className="pointer-events-none absolute -right-[5.5px] z-10 w-[11px]"
        style={{
          top: "-5.5px",
          bottom: "-5.5px",
          backgroundImage: dots,
          backgroundSize: "11px 11px",
        }}
        aria-hidden="true"
      />
    </>
  );
}

function Postmark() {
  return (
    <svg
      viewBox="0 0 120 120"
      className="pointer-events-none absolute -top-3 -left-9 z-20 h-[74px] w-[74px] opacity-55 mix-blend-multiply"
      aria-hidden="true"
    >
      <defs>
        <path id="postmark-top" d="M22,60 a38,38 0 0 1 76,0" fill="none" />
        <path id="postmark-bottom" d="M26,60 a34,34 0 0 0 68,0" fill="none" />
      </defs>
      <g stroke="#3b2f1c" fill="none" strokeWidth="2">
        <circle cx="60" cy="60" r="40" />
        <circle cx="60" cy="60" r="33" strokeWidth="1.2" />
        <path d="M4,44 q10,-6 20,0 t20,0" strokeWidth="2.4" />
        <path d="M4,54 q10,-6 20,0 t20,0" strokeWidth="2.4" />
        <path d="M4,64 q10,-6 20,0 t20,0" strokeWidth="2.4" />
      </g>
      <g fill="#3b2f1c">
        <text fontSize="11" fontFamily="monospace" letterSpacing="1.6">
          <textPath href="#postmark-top" startOffset="50%" textAnchor="middle">
            MUMBAI
          </textPath>
        </text>
        <text fontSize="9" fontFamily="monospace" letterSpacing="1.2">
          <textPath href="#postmark-bottom" startOffset="50%" textAnchor="middle">
            INDIA
          </textPath>
        </text>
        <text
          x="60"
          y="64"
          fontSize="12"
          fontFamily="monospace"
          textAnchor="middle"
        >
          {new Date().toLocaleDateString("en-GB", {
            day: "2-digit",
            month: "short",
          })}
        </text>
      </g>
    </svg>
  );
}

function EnvelopeLayer({
  part,
  width,
  height,
  sealed = false,
}: {
  part: "back" | "front" | "flap";
  width: number;
  height: number;
  sealed?: boolean;
}) {
  // While the flap is open it sits behind the postcard, the way it would if you
  // were actually sliding one in. Once it swings shut it comes to the front.
  const zIndex = part === "back" ? 0 : part === "front" ? 20 : sealed ? 30 : 5;

return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.35 }}
      className="pointer-events-none absolute inset-0 flex items-center justify-center"
      style={{ zIndex }}
      aria-hidden="true"
    >
      <div className="relative" style={{ width, height }}>
        {part === "back" ? (
          <div
            className="absolute inset-0 rounded-[3px]"
            style={{
              background: "linear-gradient(160deg, #f2e7cf 0%, #e6d7b6 100%)",
              boxShadow: "0 18px 30px -18px rgba(60,45,20,0.6)",
            }}
          />
        ) : part === "front" ? (
          <>
            {/* Front pocket with the classic V notch */}
            <div
              className="absolute inset-0"
              style={{
                background: "linear-gradient(180deg, #f4ead6 0%, #e9dcbe 100%)",
                clipPath: "polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%)",
                borderRadius: 3,
                boxShadow: "inset 0 0 0 1px rgba(150,125,80,0.35)",
              }}
            />
            {/* Side creases */}
            <div
              className="absolute inset-0"
              style={{
                background:
                  "linear-gradient(to bottom right, rgba(160,135,90,0.18) 49.6%, transparent 50%), linear-gradient(to bottom left, rgba(160,135,90,0.18) 49.6%, transparent 50%)",
                clipPath: "polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%)",
              }}
            />
          </>
        ) : (
          <>
            <motion.div
              className="absolute top-0 left-0 w-full"
              style={{
                height: height * 0.62,
                transformOrigin: "top center",
                background: "linear-gradient(180deg, #efe2c4 0%, #e2d1ab 100%)",
                clipPath: "polygon(0 0, 100% 0, 50% 100%)",
              }}
              initial={{ rotateX: 180 }}
              animate={{ rotateX: sealed ? 0 : 180 }}
              transition={{ duration: 0.45 }}
            />
            {/* Wax seal */}
            <motion.div
              className="absolute left-1/2 h-5 w-5 rounded-full"
              style={{
                top: height * 0.62 - 10,
                marginLeft: -10,
                background:
                  "radial-gradient(circle at 35% 30%, oklch(66% 0.13 42), oklch(48% 0.12 38))",
                boxShadow: "0 1px 3px rgba(60,20,10,0.4)",
              }}
              initial={{ scale: 0 }}
              animate={{ scale: sealed ? 1 : 0 }}
              transition={{ duration: 0.28, delay: sealed ? 0.32 : 0 }}
            />
          </>
        )}
      </div>
    </motion.div>
  );
}

function Delivered({ onReset }: { onReset: () => void }) {
  return (
    <div
      className="relative overflow-hidden rounded-[3px] px-6 py-12 text-center"
      style={{
        backgroundColor: PAPER,
        boxShadow:
          "inset 0 0 0 1px rgba(140,120,80,0.35), 0 18px 38px -22px rgba(60,45,20,0.5)",
      }}
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.055] mix-blend-multiply"
        style={{ backgroundImage: GRAIN }}
        aria-hidden="true"
      />
      <p className="rotate-[-6deg] font-mono text-[11px] tracking-[0.3em] text-clay uppercase">
        ✦ posted ✦
      </p>
      <p className="mt-5 font-serif text-2xl text-ink-900">
        It's in the post.
      </p>
      <p className="mx-auto mt-3 max-w-sm text-[15px] leading-relaxed text-ink-700">
        Thank you for writing. I read every one of these myself and I'll
        reply to the address you left.
      </p>
      <button
        type="button"
        onClick={onReset}
        className="mt-7 text-[13px] text-ink-500 underline decoration-ink-300 underline-offset-[4px] transition-colors hover:text-ink-900 hover:decoration-clay"
      >
        write another
      </button>
    </div>
  );
}

function CameraIcon() {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="text-ink-400"
      aria-hidden="true"
    >
      <path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2L8 5h8l1.5 2h2A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z" />
      <circle cx="12" cy="13" r="3.4" />
    </svg>
  );
}
</article></body></html>