Same endpoint, different surface
Every /api/* endpoint on coolreadme.xyz returns an image with `Cache-Control: public, max-age=7200, s-maxage=7200` and `Access-Control-Allow-Origin: *`. That means you can drop an `<img src="https://coolreadme.xyz/api/cinematic?user=yourname">` into any HTML page on any domain — Vercel-deployed Next.js, Astro, plain static site, doesn't matter.
Next.js Image vs plain img
If your Vercel site is Next.js, you have a choice: use `next/image` (which will revalidate and re-proxy through Vercel's image optimizer) or use a plain `<img>` tag (direct hit to coolreadme.xyz). For animated SVG cards, *use plain `<img>`* — next/image converts to AVIF/WebP, which kills the SVG animation. For static-ish PNG cards (Satori-rendered like cinematic), either works.
Edge runtime affinity
coolreadme.xyz is itself deployed on Vercel's edge runtime. When your Vercel site fetches a coolreadme card from the same region, you get minimal latency — typically sub-50ms. Combined with the 2-hour edge cache, repeat visitors load instantly.
Open Graph for your profile site
You can use a coolreadme card as your OG image. Add to your Next.js metadata: `openGraph: { images: ["https://coolreadme.xyz/api/cinematic?user=yourname&status=ACTIVE"] }`. When someone shares your profile site on X / Slack / Discord, the unfurl shows the same animated cinematic card. (Satori-rendered cards are PNG, which most unfurlers prefer over SVG.)
Build-time vs request-time
Don't try to fetch coolreadme card binaries at build time and serve them statically. They're meant to be live — the cat streak card, for example, reflects the *current* GitHub contribution graph. Embed the URL, not the data.