Render JSX to images.
Skip the browser.

Headless Chromium needs ~300 MB and a cold start for one OG card. Takumi needs a function call.

Get started Open the playgroundbun i takumi-js

Prisma-style OG image rendered by Takumi

The code is the design file.

Drop-in for next/og. The card is this source file, rendered.

export default function DemoCard() {
  return (
    <div tw="flex h-full w-full flex-col justify-between bg-[#16130f] p-14 text-white">
      <div tw="flex items-center justify-between">
        <span tw="text-2xl text-[#a8a29a]">takumi.kane.tw</span>
        <span tw="h-10 w-10 bg-[#ff4d4d]" />
      </div>
      <h1
        tw="text-7xl font-bold leading-tight"
        style={{
          backgroundClip: "text",
          backgroundImage: "linear-gradient(110deg, #fff 60%, #ff4d4d)",
          color: "transparent",
        }}
      >
        This card is the code beside it.
      </h1>
      <div tw="flex items-center justify-between text-2xl text-[#a8a29a]">
        <span>Rendered without a browser</span>
        <span>1200 × 630</span>
      </div>
    </div>
  );
}

export default function DemoCard() {
  return (
    <div tw="flex h-full w-full flex-col justify-between bg-[#16130f] p-14 text-white">
      <div tw="flex items-center justify-between">
        <span tw="text-2xl text-[#a8a29a]">takumi.kane.tw</span>
        <span tw="h-10 w-10 bg-[#ff4d4d]" />
      </div>
      <h1
        tw="text-7xl font-bold leading-tight"
        style={{
          backgroundClip: "text",
          backgroundImage: "linear-gradient(110deg, #fff 60%, #ff4d4d)",
          color: "transparent",
        }}
      >
        This card is the code beside it.
      </h1>
      <div tw="flex items-center justify-between text-2xl text-[#a8a29a]">
        <span>Rendered without a browser</span>
        <span>1200 × 630</span>
      </div>
    </div>
  );
}

The card rendered from the source on the left

home-demo-card@2x.webp · 52 KB · rendered by bun example/twitter-images

One tree, sampled across time.

Pass a timestamp. PNG is t = 0. Animated WebP is the same tree over t.

@keyframes morph {
  from { border-radius: 12%; transform: rotate(0deg) scale(1); }
  50%  { border-radius: 50%; transform: rotate(90deg) scale(0.72); }
  to   { border-radius: 12%; transform: rotate(180deg) scale(1); }
}