og card studio

customizable social graphics (1200x630, 1080x1080) & Next.js code.

presets:

dimensions

layout style

font family

pattern overlay

accent bar style

card title

subtitle / domain

tag badge

author name

avatar / logo url (optional)

color palette

card

accent

text

subtext

border radius24px

live canvas preview (1200x630)1200x630

next.js opengraph-image.tsx code

// app/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";
export const alt = "Designing Zero-Latency Vision Pipelines";
export const size = { width: 1200, height: 630 };

export default async function Image() {
  return new ImageResponse(
    (
      <div style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        padding: "60px",
        backgroundColor: "#060606",
        color: "#f2f1ee",
        fontFamily: "sans-serif",
      }}>
        <div style={{ fontSize: 20, color: "#b39ce6", fontFamily: "monospace" }}>
          ARCHITECTURE & DESIGN
        </div>
        <div style={{ fontSize: 54, fontWeight: "bold", lineHeight: 1.2 }}>
          Designing Zero-Latency Vision Pipelines
        </div>
        <div style={{ fontSize: 22, color: "#94918a", fontFamily: "monospace" }}>
          Yashvardhan · yash.arshnah.in · Aug 2026
        </div>
      </div>
    ),
    { ...size }
  );
}