Menü
Create professional ultra-wide cinematic banners for GitHub READMEs using Flux and Ideogram models with typography options
| name | ai-generated-readme-banners |
| description | 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.
Flux-supported ratios (2026):
21:9 — Ultra-wide cinematic (best for README banners)16:9 — Standard widescreen16:3 — NOT supported (causes 422 validation error)Recommendation: Use 21:9 for maximum banner width within API constraints.
| Model | Cost | Best For | Typography | Quality |
|---|---|---|---|---|
| Flux Schnell | $0.003 | Testing, iteration | No text | Good |
| Flux 1.1 Pro | $0.04 | Production (clean) | No text | Excellent |
| Ideogram v2 | $0.08 | Production (with text) | ✅ Crystal clear | Stunning |
Workflow:
Reality Check: Ideogram v2 quality is amazing — photorealistic 3D rendering with perfect typography integration. The $0.08 cost is a bargain for professional-grade output.
- 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',
};
magic_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)
✅ 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.
Defense-in-depth, PII protection, secrets scanning, and secure packaging for distributed software
Systematic testing for confidence without over-testing — the right test at the right level
Generate consistent visual character references across multiple scenarios using Flux and nano-banana-pro on Replicate
Generate professional presentations using the Gamma API with expert storytelling consulting based on Duarte methodology.
Intelligent project persona identification using priority chain detection with LLM and heuristic fallback
Reusable patterns for VS Code extension development.