Poster

poster

Render a single-file React component to an image. One tool: poster_render.

Write TSX like a graphic designer composes a poster, not like a web developer building a page. Everything is fixed-width, non-responsive, pixel-precise, and optimized to look amazing at thumbnail size on a social feed.

When to reach for poster_render

Chart, dashboard snapshot, OG image, social-share card, year-in-review, editorial data story, magazine layout, event poster, calendar, cover image, PDF one-pager, README hero. Anything that's a composition meant to be looked at, not interacted with.

Not for: interactive UIs, forms, multi-page sites, anything needing runtime JS behavior after render.

The contract

These aren't style preferences — break them and the tool rejects the render.

1. The root element declares the canvas — this is the only source of truth

The tool has no width or height parameter. The root 's Tailwind size IS the canvas. The renderer measures it exactly.

// ✓ width only — height emerges from content (use this 80% of the time)
<div className="w-[1600px] p-10 ...">

// ✓ width + height — fixed aspect for magazine covers, story format, etc.
<div className="w-[1080px] h-[1350px] p-10 ...">

// ✗ rejected — no root width (canvas defaults, usually wrong)
<div className="p-10 ...">

// ✗ rejected — min-h-screen stretches to viewport, not canvas
<div className="w-[1600px] min-h-screen ...">

// ✗ rejected — w-full next to w-[Npx] overrides the explicit width
<div className="w-[1600px] w-full ...">

// ✗ brittle — aspect without explicit width is indeterminate
<div className="aspect-[4/5] p-10 ...">

If you use absolute-positioned decorations (top: 40%, gradient blobs), you need a definite parent height — add h-[Npx] or min-h-[Npx] to the root.

2. Font-size floor: 14px

Anything ≤12px disappears when the poster is viewed at half scale on a feed. Don't go below text-sm (14px) or text-[14px]. Recharts axis ticks: fontSize: 13. Chart-internal SVG labels: fontSize: 13+.

3. Use the three bundled fonts

No imports needed. They're loaded in the shell:

• Inter, system-ui — default sans
• 'Source Serif 4', serif — magazine / editorial / italic "reveal words"
• 'JetBrains Mono', ui-monospace, monospace — code, mono metadata

Set via inline style={{ fontFamily: "..." }} on the root.

4. Canvas size by shape

Pick a shape, write w-[Npx] (add h-[Npx] only if fixed-aspect), let auto-fit do the rest.

The layout grammar

Every good poster uses these primitives. Mix and match.

Header row: kicker + title (left) + chip (right)

<header className="flex items-end justify-between">
  <div>
    <div className="text-[14px] font-bold uppercase tracking-[0.3em] text-white/50">
      Pi · Monday, 16 April 2026
    </div>
    <h1 className="mt-2 text-5xl font-black tracking-tight">
      Good morning
    </h1>
  </div>
  <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[14px] text-white/60">
    Live · last 7 days
  </div>
</header>

Rule of thumb: kicker = meta context, title = the answer, right-side chip = status/time.

Eyebrow kicker (the "small-caps label")

<div className="text-[14px] font-bold uppercase tracking-[0.3em] text-white/50">
  FIG. 1 — GLOBAL TEMPERATURE ANOMALY
</div>

• text-[14px] to text-[15px]
• font-semibold to font-bold
• uppercase always
• tracking-[0.2em] to tracking-[0.5em] — more tracking = more formal
• muted color: text-white/40 to text-white/60 on dark, text-neutral-500 on light

Italic "reveal word" in a headline

The signature move. Break a headline with a gradient-filled Source Serif 4 italic:

<h1 className="text-7xl font-black tracking-tight leading-[0.9]">
  A century and a half of{" "}
  <em
    className="italic font-normal"
    style={{
      fontFamily: "'Source Serif 4', serif",
      background: "linear-gradient(180deg,#fef3c7 0%,#f472b6 55%,#a855f7 100%)",
      WebkitBackgroundClip: "text",
      color: "transparent",
    }}
  >
    warming,
  </em>{" "}
  charted in one line.
</h1>

The pastel-to-fuchsia-to-violet gradient is the most reusable "poster-ai look". Other good ones:

• #fef3c7 → #f97316 → #dc2626 (cream → orange → crimson)
• #22d3ee → #8b5cf6 (cyan → violet)
• #fde68a → #f59e0b → #ec4899 (butter → amber → pink)

Card (the workhorse container)

<div
  className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5"
  style={{ boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.04), 0 20px 40px -24px rgba(0,0,0,0.6)" }}
>
  {children}
</div>

• rounded-xl (12px) to rounded-3xl (24px)
• subtle border: border-white/[0.05-0.15] on dark, border-neutral-200/80 on light
• subtle fill: bg-white/[0.02-0.08] on dark, pure bg-white on light
• inset top highlight + offset shadow for floating feel

KPI stat

<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
  <div className="flex items-center justify-between">
    <div className="flex h-9 w-9 items-center justify-center rounded-xl"
         style={{ background: "linear-gradient(135deg,#22d3ee,#3b82f6)" }}>
      <TrendingUpIcon className="h-4 w-4 text-white" />
    </div>
    <span className="text-[14px] font-medium text-emerald-400">+18.4%</span>
  </div>
  <div className="mt-4 text-[14px] uppercase tracking-wider text-white/40">ARR</div>
  <div className="mt-1 text-2xl font-semibold tabular-nums">$14.8M</div>
</div>

Gradient icon square + label + value + delta chip. Use tabular-nums on every number.

Hero metric (the big single number)

<div>
  <div className="text-[14px] font-bold uppercase tracking-[0.3em] text-white/80">
    You listened to
  </div>
  <div className="mt-2 font-black leading-[0.82] tracking-tighter tabular-nums"
       style={{ fontSize: 220 }}>
    586
  </div>
  <div className="mt-1 text-3xl font-bold">hours of music</div>
  <div className="mt-1 text-lg text-white/80">
    That's longer than 83% of listeners in Portugal.
  </div>
</div>

Kicker → ENORMOUS number (180-260px) → unit → context sentence. Set fontSize inline when going above text-9xl.

Activity ring (Apple-Watch style)

const stroke = 18, r = (200 - stroke) / 2, c = 2 * Math.PI * r;
const pct = Math.min(value / goal, 1.4);
<svg width={200} height={200} className="-rotate-90">
  <circle cx={100} cy={100} r={r} stroke={color} strokeOpacity={0.15}
          strokeWidth={stroke} fill="none" />
  <circle cx={100} cy={100} r={r} stroke={color} strokeWidth={stroke}
          strokeLinecap="round" fill="none"
          strokeDasharray={c} strokeDashoffset={c * (1 - pct)}
          style={{ filter: `drop-shadow(0 0 8px ${color}99)` }} />
</svg>

Contribution heatmap (GitHub-style)

const levelColor = ["rgba(255,255,255,0.05)", "#0e4429", "#006d32", "#26a641", "#39d353"];
<div className="flex gap-[3px]">
  {weeks.map((week, w) => (
    <div key={w} className="flex flex-col gap-[3px]">
      {week.map((level, d) => (
        <div key={d} className="h-[14px] w-[14px] rounded-sm"
             style={{ background: levelColor[level] }} />
      ))}
    </div>
  ))}
</div>

Footer

<footer className="mt-6 flex items-center justify-between border-t border-white/5 pt-4 text-[14px] text-white/30">
  <span>poster · generated 2026-04-16</span>
  <span>nebula.dev/pulse</span>
</footer>

Color systems

Pick ONE family and stick to it. Mixing accents = muddy.

Dark theme bases

Light theme bases

Accent families (pick one)

Gradient recipes

// Radial "hotspot" — use two at opposite corners for depth
"radial-gradient(800px 500px at 90% 0%, rgba(139,92,246,0.18), transparent 60%), #0a0a0f"

// Pastel reveal gradient (for gradient text)
"linear-gradient(180deg,#fef3c7 0%,#f472b6 55%,#a855f7 100%)"

// Tech gradient (for icon squares)
"linear-gradient(135deg,#22d3ee,#3b82f6)"

// Sunset (for story backgrounds)
"radial-gradient(ellipse at top, #7c3aed 0%, #ec4899 40%, #f97316 75%, #fbbf24 100%)"

Grain overlay (adds poster-print feel)

<div
  className="pointer-events-none absolute inset-0 opacity-[0.08] mix-blend-overlay"
  style={{
    backgroundImage: "repeating-radial-gradient(circle at 20% 30%, white 0, white 1px, transparent 1px, transparent 4px)",
  }}
/>

Recharts idioms

Posters use Recharts differently than an app does. No tooltips (static render), no legend chrome, minimal axes, gradient fills.

Always

• Wrap in <ResponsiveContainer width="100%" height="100%"> inside a fixed-height parent
• tickLine={false} axisLine={false} on axes
• Tick styles: tick={{ fill: "rgba(255,255,255,0.35)", fontSize: 13 }}
• CartesianGrid stroke="rgba(255,255,255,0.05)" vertical={false} (horizontal-only grid)

Gradient fills

<defs>
  <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stopColor="#22d3ee" stopOpacity={0.55} />
    <stop offset="100%" stopColor="#22d3ee" stopOpacity={0} />
  </linearGradient>
</defs>
<Area dataKey="v" stroke="#22d3ee" strokeWidth={2} fill="url(#g1)" />

Compare vs forecast pattern

Dashed forecast line + solid actual, both filled:

<Area dataKey="forecast" stroke="#a78bfa" strokeDasharray="4 3" strokeWidth={1.5} fill="url(#fill-fc)" />
<Area dataKey="revenue" stroke="#22d3ee" strokeWidth={2.5} fill="url(#fill-rev)" />

Bar charts

• radius={[6, 6, 0, 0]} on the Bar for rounded tops
• Per-bar color via <Cell> inside <Bar>
• Hide one axis when values speak for themselves: <YAxis hide />

Donut / radial

• innerRadius={38} outerRadius={62} for thin ring
• paddingAngle={2} for gap between slices
• stroke="none" to remove outlines
• Color slices via <Cell fill={...}> mapped from data

Content voice — realistic, not foo/bar

Use plausible fake data. It makes the poster feel real, which makes it persuasive.

• Names: diverse origins — Ava Chen, Sora Okafor, Elena Rossi, Kai Nakamura, Jin Park, Lior Mendez, Anaïs Okafor
• Revenue: $48,291, $14.8M, +12.4% — precise, never round
• Dates: "Monday, 16 April 2026", "Apr 16 · Tuesday", "Spring 2026"
• Places: Lisbon, Berlin, Tokyo, Estrela, Tanzhaus Alpha
• Product/publication names: Prism, Nebula, The Almanac, MUSE, Vol. XII
• Numbers with deltas: pair every metric with "+N% vs last week"
• Handles: @dev, @you, @team — never personal names like @alice

Three-part kickers

"Publication · Volume · Category" feels authoritative:

The Almanac · Vol. XII · Climate
Pi · Monday, 16 April 2026
Live at Tanzhaus · Berlin
POSTER · SHOWCASE

Visual effects

Small touches that separate "a poster" from "a webpage screenshot".

Floating card shadow

boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.04), 0 20px 40px -24px rgba(0,0,0,0.6)"

Inner edge highlight + outer offset shadow. Makes cards feel lifted.

Icon glow

filter: `drop-shadow(0 0 8px ${color}99)`

On activity rings, gradient circles, accent dots.

Backdrop blur glass

<div className="rounded-3xl border border-white/20 bg-white/[0.08] backdrop-blur-2xl p-10">

On colorful gradient backgrounds. Weather hero, fitness cards.

Barcode / mono chrome

{Array.from({ length: 32 }).map((_, i) => (
  <div key={i} style={{ width: i % 3 === 0 ? 2 : 1, height: 40, background: "white" }} />
))}

Magazine-cover barcode strip. Feels editorial.

Generative radial scatter

{Array.from({ length: 320 }).map((_, i) => {
  const ring = Math.floor(i / 64);
  const angle = ((i % 64) / 64) * Math.PI * 2;
  const radius = 40 + ring * 55 + Math.sin(i * 0.8) * 14;
  const hue = ((ring / 5) * 300 + 180) % 360;
  return (
    <circle cx={Math.cos(angle) * radius} cy={Math.sin(angle) * radius}
            r={1 + Math.abs(Math.sin(i * 0.7)) * 4}
            fill={`hsl(${hue},80%,62%)`} opacity={0.82} />
  );
})}

Great for hero visuals where the poster is about the shape of data.

Compositions catalog

Reach for one of these skeletons based on what the user wants.

Dashboard (4-up KPI row + mixed chart grid)

1. Header (good-morning + systems chip)
2. 4 × KPI card row
3. 2-col: wide area chart + narrow activity list
4. 2-col: bar chart + donut

See: dashboard example vibe.

Editorial data story (magazine)

1. Masthead strip (publication · vol · issue)
2. Big headline with serif italic reveal word + lede paragraph
3. Fig. 1: wide chart with caption
4. Two-column: chart + chart
5. Pull quote with serif italic + left border
6. Footer (url + page N)

Year-in-review (story format 1080×1350)

1. Tiny header (app name + @user chip)
2. HERO number (200px+)
3. Top-N list with gradient progress bars
4. Monthly rhythm bar chart
5. "Most played X" featured card with gradient icon
6. Hashtag footer

Fitness / health dashboard

1. Date kicker + encouragement headline
2. 2-up: activity rings card | 6-stat grid card
3. 2-up: wide heart-rate area chart | weekly bars

Social share card / OG

1. Single hero element (giant word, gradient number, icon)
2. Kicker above, url/handle below
3. Dark background with 2 radial gradient hotspots
4. 1600×900

Event / concert poster

1. Mono-spaced corner metadata
2. THREE STACKED WORDS, alternating treatments (gradient / italic / outline-only)
3. Divider strip with date + status
4. 2-col: lineup list + info cards
5. Genre tag chips at bottom

Weather hero

1. Painted-sky gradient root (linear-gradient(160deg, #f0abfc, #818cf8, #22d3ee, #0ea5e9))
2. Glass backdrop-blur card containing:
   • Location kicker + chip
   • MASSIVE temperature (180px+) with degree symbol
   • Row of icon+stat (humidity, wind, UV)
   • 24-hour area chart with data labels
   • 7-day forecast row with icon + hi/lo per day

Pitfalls — how posters go wrong

Fixed-aspect posters need to budget content to the canvas

When you declare w-[1080px] h-[1350px], any content that extends past 1350px gets clipped (root usually has overflow-hidden to contain gradient blobs). Before writing the TSX, mentally add up section heights:

padding (p-14 = 56px × 2)  = 112
header block               ~180
hero number card           ~320
stats row                  ~120
authors card               ~320
rhythm card                ~160
footer                     ~60
                           ----
                           ~1272  → fits in 1350 with ~80px breathing

If the budget is tight, either drop a section or switch to content-driven height (just w-[Npx]). The wrapped example does this — width fixed at 1080, height emerges.

Bar charts / histograms without Recharts

If you're drawing bars by hand (not via Recharts), use pixel math for the bar heights, not percentages:

// ✗ collapses to 0 if parent is content-driven
<div style={{ height: `${(v / max) * 100}%` }} />

// ✓ explicit pixel ceiling, works everywhere
<div style={{ height: `${(v / max) * 80}px` }} />

Or constrain the parent to a fixed pixel height (h-[120px]) and put the bar inside with h-full / absolute positioning.

Calling the tool

poster_render({
  tsx: "<your full TSX source as a string>",
  out: "./chart.png"
})

That's it. No width or height — the TSX root's Tailwind size is the canvas. Format is inferred from the extension (.png, .svg, .pdf, .jpg, .webp).

The tool returns the resolved absolute path, the rendered pixel dimensions (so you can sanity-check), size in KB, and format. Surface that to the user so they know where the file landed.

A minimal working example

export default function Hello() {
  return (
    <div
      className="w-[1200px] p-12 text-white"
      style={{
        background:
          "radial-gradient(800px 500px at 90% -10%, rgba(168,85,247,0.2), transparent 60%), #07060d",
        fontFamily: "'Inter', system-ui",
      }}
    >
      <div className="text-[14px] font-bold uppercase tracking-[0.4em] text-white/40">
        Pi · 16 Apr 2026
      </div>
      <h1 className="mt-3 text-6xl font-black tracking-tight leading-tight">
        Hello,{" "}
        <span
          className="italic font-normal"
          style={{
            fontFamily: "'Source Serif 4', serif",
            background: "linear-gradient(180deg,#fef3c7 0%,#f472b6 55%,#a855f7 100%)",
            WebkitBackgroundClip: "text",
            color: "transparent",
          }}
        >
          world.
        </span>
      </h1>
      <div className="mt-4 text-sm text-white/50">
        A one-minute poster. Made with poster-ai.
      </div>
    </div>
  );
}

Always start with a skeleton this shape: gradient root + kicker + headline (with one italic reveal word) + supporting line. Add complexity from there.