Create professional ultra-wide cinematic banners for GitHub READMEs using Flux and Ideogram models with typography options
Ultra-wide cinematic project branding — from ASCII art to professional visuals in minutes.
Problem: ASCII art and SVG banners are limited; professional banner design is expensive and time-consuming.
Solution: Generate ultra-wide photorealistic banners using Ideogram v2 with crystal-clear typography, professional composition, and project-specific branding in minutes.
Quality: Ideogram v2 produces stunning photorealistic results with perfect text rendering — far exceeding expectations for AI-generated imagery.
SVG is the default banner format — scalable, theme-aware, lightweight, and version-control friendly.
Use Recraft v4 SVG on Replicate for AI-generated SVG banners:
const output = await replicate.run("recraft-ai/recraft-v4-svg", {
input: {
prompt: "Professional ultra-wide banner for a cognitive AI project. Modern tech aesthetic, gradient from deep navy to electric blue, geometric patterns, clean composition.",
size: "1820x1024", // Closest to 16:9 wide
style: "digital_illustration", // or: "realistic_image", "vector_illustration"
}
});
// Output is native SVG — save directly
import { writeFile } from "node:fs/promises";
await writeFile("banner.svg", output);
SVG Advantages for Banners:
prefers-color-scheme media queriesFlux-supported ratios (2026):
21:9 — Ultra-wide cinematic (best for README banners)16:9 — Standard widescreen16:3 — NOT supported (causes 422 validation error)Recraft SVG sizes: 1820x1024 (wide), 1024x1024 (square), 1434x1024 (4:3)
Recommendation: Use Recraft SVG 1820x1024 as default; use Flux 21:9 for raster-only needs.
| Model | Cost | Best For | Typography | Output | Quality |
|---|---|---|---|---|---|
| Recraft v4 SVG | varies | Default — SVG banners | ✅ Text rendering | SVG | Excellent |
| Recraft v4 Pro SVG | $0.30 | Premium SVG, detailed paths | ✅ Text rendering | SVG | Best |
| Flux Schnell | $0.003 | Testing, iteration | No text | PNG | Good |
| Flux 1.1 Pro | $0.04 | Production raster (clean) | No text | PNG | Excellent |
| Ideogram v2 | $0.08 | Raster with text (proven API) | ✅ Crystal clear | PNG | Stunning |
| Ideogram v3 Turbo | $0.03 | Fast raster typography | ✅ Crystal clear | PNG | Excellent |
| Ideogram v3 Balanced | $0.06 | Balanced quality/speed | ✅ Crystal clear | PNG | Stunning |
| Ideogram v3 Quality | $0.09 | Maximum quality + style refs | ✅ Crystal clear + styles | PNG | Best |
v3 New Capabilities: Style reference images (up to 3 uploads), style_preset field (80s Illustration, Art Deco, Watercolor, Oil Painting, Pop Art, Vintage Poster, etc.), style codes for reuse.
Recommendation:
style_reference_images- Left side: Main character/protagonist (1/3)
- Center: Thematic element/focal point (1/3)
- Right side: Environmental/world context (1/3)
Cinematic ultra-wide banner illustration for "[PROJECT NAME]" header.
[Genre/aesthetic description]
COMPOSITION (21:9 ultra-wide cinematic format):
- Left: [Character with specific details]
- Center: [Thematic focal point]
- Right: [Environment, atmosphere]
LIGHTING:
- [Specific techniques for each zone]
STYLE:
- [Art direction, realism level]
COLOR PALETTE:
- [Dominant colors, accents]
MOOD: [Emotional tone]
Critical: Case-sensitive parameter values!
const input = {
prompt: BANNER_PROMPT,
aspect_ratio: '3:1', // Ideogram's widest (NOT '21:9')
magic_prompt_option: 'On', // Must be 'On', 'Off', or 'Auto' (capitalized!)
style_type: 'Realistic', // Options: 'Realistic', 'General', 'Design', etc.
resolution: '1536x512', // Specific dimensions (not '1440p')
output_format: 'png',
};
// v3 Turbo ($0.03/image — same aspect ratios, new style controls)
const input = {
prompt: BANNER_PROMPT,
aspect_ratio: '3:1', // Same as v2 (NOT '21:9')
magic_prompt_option: 'Auto', // 'Auto', 'On', or 'Off'
style_preset: 'None', // NEW: 'None', '80s Illustration', 'Art Deco',
// 'Watercolor', 'Oil Painting', 'Pop Art',
// 'Vintage Poster', 'Magazine Editorial',
// 'Graffiti', 'Bauhaus', 'Collage', etc.
style_reference_images: [], // NEW: up to 3 reference images for style transfer
output_format: 'png',
};
// Model IDs:
// ideogram-ai/ideogram-v3-turbo $0.03 — fastest
// ideogram-ai/ideogram-v3-balanced $0.06 — balanced
// ideogram-ai/ideogram-v3-quality $0.09 — highest quality
v3 Key Differences from v2:
style_type field removed → replaced by style_preset (more presets)resolution field still works but aspect_ratio preferredmagic_prompt_option: 'ON' → Must be 'On' (case-sensitive)style_type: 'CINEMATIC' → Invalid, use 'Realistic'aspect_ratio: '21:9' → Ideogram doesn't support this, use '3:1'// Ideogram returns URL as getter function, not string
let imageUrl;
if (output && typeof output.url === 'function') {
imageUrl = output.url().toString();
} else if (typeof imageUrl === 'object' && imageUrl.href) {
imageUrl = imageUrl.href;
}
Structure: Use clear labeled sections in your prompt for best results.
Professional technology banner (3:1 ultra-wide format).
TITLE TEXT (large, centered):
"[EXACT TEXT]"
- Bold modern sans-serif, uppercase
- [Color specification or gradient]
- Crystal clear, perfectly legible
- Sharp crisp lettering
SUBTITLE TEXT (below title):
"[Exact subtitle]"
- Clean font, [color]
- Readable professional typography
[VISUAL ELEMENTS]:
- [Specific objects, positioned where]
- [Prominent features, branding elements]
- Photorealistic 3D rendering
BOTTOM [CORNER] (optional):
- [Logo mark description]
- "[Brand text]" in [color]
BACKGROUND COMPOSITION (3:1 ultra-wide):
- [Gradient colors with hex codes]
- [Atmospheric elements: stars, particles, etc.]
- [Lighting effects: glows, halos]
LIGHTING:
- [Specific lighting techniques]
- [Glow sources and colors]
- Modern cinematic quality
COLOR PALETTE:
- Background: [hex codes]
- Accents: [hex codes]
- Text: [color with effects]
STYLE:
- Photorealistic 3D rendering
- [Aesthetic description]
- Sharp detail, cinematic quality
TEXT QUALITY CRITICAL:
- Crystal clear text rendering
- No distortion whatsoever
- Perfect spelling: "[EXACT TEXT]"
- Professional typographic hierarchy
MOOD: [Emotional tone, brand feeling]
Key Principles:
Generate multiple composition variations for visual comparison:
Benefits:
Cost: 3 variations × $0.08 = $0.24 (validated)
Example: Alex Cognitive Architecture generated:
Recommendation:
const input = {
prompt: BANNER_PROMPT,
aspect_ratio: '21:9',
output_format: 'png',
output_quality: 100,
};
const output = await replicate.run('black-forest-labs/flux-schnell', { input });
import Replicate from 'replicate';
import fs from 'fs-extra';
import https from 'https';
const replicate = new Replicate({
auth: process.env.REPLICATE_API_TOKEN,
});
const BANNERS = [
{
id: 'banner-variant-1',
filename: 'banner-1.png',
title: 'MAIN TITLE',
subtitle: 'Subtitle text',
prompt: `Professional technology banner (3:1 ultra-wide format).
TITLE TEXT (large, centered):
"MAIN TITLE"
- Bold modern sans-serif, uppercase
- Gradient from deep blue to vibrant purple
- Crystal clear, perfectly legible
SUBTITLE TEXT (below title):
"Subtitle text"
- Clean font, white text
- Readable professional typography
[VISUAL ELEMENTS]:
- [Describe specific visuals]
- Photorealistic 3D rendering
BACKGROUND COMPOSITION:
- Deep space gradient (#080810 → #0d1520)
- Scattered white stars
- Radial glow effects
COLOR PALETTE:
- Background: Deep blue (#0078d4), purple (#7c3aed)
- Text: White with blue glow
STYLE:
- Photorealistic 3D rendering
- Modern tech aesthetic
- Sharp detail, cinematic quality
TEXT QUALITY CRITICAL:
- Crystal clear sharp letterforms
- Perfect spelling: "MAIN TITLE"
MOOD: Inspiring, professional, cutting-edge technology`,
},
// Add more variations...
];
async function downloadImage(url, filepath) {
return new Promise((resolve, reject) => {
const file = fs.createWriteStream(filepath);
https.get(url, (response) => {
response.pipe(file);
file.on('finish', () => {
file.close();
resolve();
});
}).on('error', (err) => {
fs.unlink(filepath, () => {});
reject(err);
});
});
}
async function generateBanner(banner) {
console.log(`🎨 Generating: ${banner.title}`);
const input = {
prompt: banner.prompt,
aspect_ratio: '3:1',
magic_prompt_option: 'On', // Case-sensitive!
style_type: 'Realistic',
resolution: '1536x512',
output_format: 'png',
};
const output = await replicate.run('ideogram-ai/ideogram-v2', { input });
// Handle Ideogram URL getter function quirk
let imageUrl;
if (output && typeof output.url === 'function') {
imageUrl = output.url().toString();
} else if (Array.isArray(output)) {
imageUrl = output[0];
} else if (typeof output === 'string') {
imageUrl = output;
} else if (output && output.url) {
imageUrl = output.url;
}
if (typeof imageUrl === 'object' && imageUrl.href) {
imageUrl = imageUrl.href;
}
await downloadImage(imageUrl, `assets/${banner.filename}`);
console.log(`✅ Saved: ${banner.filename}`);
return { ...banner, url: imageUrl };
}
// Generate all banners with rate limiting
const results = [];
for (const banner of BANNERS) {
const result = await generateBanner(banner);
results.push(result);
// Rate limiting: 2 seconds between requests
if (BANNERS.indexOf(banner) < BANNERS.length - 1) {
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
// Save generation report
fs.writeJsonSync('assets/banner-generation-report.json', {
generatedAt: new Date().toISOString(),
model: 'ideogram-ai/ideogram-v2',
results,
totalCost: results.length * 0.08,
}, { spaces: 2 });
console.log(`\n✅ Generated ${results.length} banners`);
console.log(`💰 Total cost: $${(results.length * 0.08).toFixed(2)}`);
"scripts": {
"generate:banner": "node scripts/generate-banner.js",
"generate:banner-text": "node scripts/generate-banner-with-text.js"
}
<div align="center">

**[Tagline]**
</div>
> Generate new: `npm run generate:banner-text`
<div align="center">

# Project Name
**[Tagline]**
</div>
> Generate new: `npm run generate:banner`
Pattern: Use labeled sections (TITLE TEXT, BACKGROUND, LIGHTING, etc.)
Why it works:
Validated: All 6 Alex banners used this structure with 100% success rate.
Technique: Specify exact hex codes in prompts
Result: Consistent brand identity across all banner variations.
Strategy: Generate multiple compositions with different focus areas
Benefit: Different banners appeal to different audience segments while maintaining cohesive brand.
Pattern: Position branding in bottom corners (left, center, or right)
Purpose: Professional touch without overwhelming main composition.
Requirement: 2-second delay between Replicate API calls
await new Promise(resolve => setTimeout(resolve, 2000));
Why: Prevents rate limit errors during batch generation.
Finding: $0.08 per Ideogram banner is exceptional value
Comparison: Stock photo licenses ($10-$100+) vs Ideogram ($0.08)
After generation, use view_image to assess banner quality before committing:
For multi-variant generation, the image carousel enables side-by-side comparison.
✅ Ideal use cases:
✅ Success patterns:
❌ Not ideal:
Adaptation tip: For social media, generate 3:1 banner first, then crop/resize to other aspect ratios in post-production.
Alex Cognitive Architecture (February 2026):
Alex in Wonderland (January 2026):
Key Learning: Ideogram v2 is the gold standard for typography banners. The quality is worth every penny of the $0.08 cost.