Package OG - Takumi

Preview

A dark card themed around the npm registry. The right-edge symbol tree is positioned absolutely at 0.3 opacity so it reads as background texture, not data. The full source also pulls live stats (jsDelivr file tree, npm downloads, GitHub stars) — the snippet below is the rendering layer with demo data inlined; see source for the fetchers.

import { Code, File, Folder, Heart, Scale, Star, Github } from "lucide-react";

const demoSymbolRows = [
  { name: "Functions", kind: "section" as const },
  { name: "render", kind: "symbol" as const },
  { name: "loadFont", kind: "symbol" as const },
  { name: "Classes", kind: "section" as const },
  { name: "Renderer", kind: "symbol" as const },
];

export default function PackageOg() {
  const packageName = "takumi-js/helpers";
  const version = "0.7.0";
  const owner = "kane50613";
  const repo = "takumi";

  return (
    <div
      style={{
        position: "relative",
        overflow: "hidden",
        width: "100%",
        height: "100%",
        backgroundColor: "#020617",
        color: "#e2e8f0",
        fontFamily: "Geist",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          position: "absolute",
          top: -40,
          left: 48,
          width: 700,
          height: 700,
          borderRadius: "50%",
          filter: "blur(64px)",
          backgroundColor: "rgba(226, 232, 240, 0.03)",
        }}
      />

      <div style={{ padding: "3.75rem", display: "flex", flexDirection: "column", gap: "3rem" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
          <img src="logo.svg" width={60} height={60} alt="logo" />
          <h1
            style={{
              fontSize: "2.75rem",
              margin: 0,
              letterSpacing: "-0.04em",
              fontFamily: "Geist Mono",
            }}
          >
            takumi.kane.tw
          </h1>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
          <div style={{ fontSize: "2.5rem", opacity: 0.5, fontFamily: "Geist Mono" }}>
            takumi-js
          </div>
          <div style={{ fontSize: "4.75rem", letterSpacing: "-0.05em", fontFamily: "Geist Mono" }}>
            helpers
          </div>
          <div style={{ fontSize: "2.25rem", opacity: 0.7, fontFamily: "Geist Mono" }}>
            v{version}
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: "1.25rem", fontSize: "2rem" }}>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            <Github width={28} height={28} />
            <span>
              {owner}
              <span style={{ opacity: 0.5 }}>/</span>
              {repo}
            </span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            <Star width={28} height={28} fill="white" />
            <span>3.0K</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            <Scale width={28} height={28} />
            <span>MIT</span>
          </div>
        </div>
      </div>

      <div
        style={{
          position: "absolute",
          right: "2rem",
          top: "2rem",
          bottom: "2rem",
          width: 340,
          display: "flex",
          flexDirection: "column",
          gap: 2,
          opacity: 0.3,
          fontSize: "1.25rem",
          fontFamily: "Geist Mono",
        }}
      >
        {demoSymbolRows.map((row, i) => (
          <div
            key={i}
            style={{
              display: "flex",
              alignItems: "center",
              paddingLeft: row.kind === "symbol" ? "20px" : 0,
            }}
          >
            <Code width={18} height={18} />
            <span style={{ marginLeft: "0.5rem" }}>{row.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Source: example/twitter-images/components/package-og-image.tsx (includes the npm / jsDelivr / GitHub fetchers and sparkline variant).