Campaign Playground
One campaign brief, laid out in four formats at once.
Working Runs in your browser, and nothing is uploaded. Try it below on sample data.
The problem
A campaign needs the same idea as a post, a story, a banner and a link preview. Rebuilding each one by hand is where text overflows and contrast drops.
What I built
A tool that takes one brief, lays out all four formats together, and checks each one before export.
- Post, story, banner and link preview
- Text shrinks until it fits
- Contrast checked before export
Features and limits
Built and tested
- One brief (event, date, tagline, button) becomes four formats: 1080×1080 post, 1080×1920 story, 1920×1080 banner, 1200×628 link preview.
- Three original themes with parametric artwork (lanterns, paper waves, signal grid); recolor any of them.
- Artwork placement on a 3×3 grid; text takes the rest of the frame and its type shrinks until the copy fits.
- Checks on every format: text inside the safe area, smallest text readable, headline contrast at least 4.5:1, button contrast at least 3:1, no text over the artwork.
- Export each format as SVG or PNG.
Limits
- Fit and overlap are estimated from average glyph widths, not measured from the font; very wide letters can run a little longer than the estimate.
- PNG export uses your system's sans-serif font when the site font is not available to the image.
- No photo or illustration input yet: the artwork is the built-in shapes only.
Planned
Better presets, masks, prompt consistency and batch variations.
How to use
- Edit the brief; every format updates.
- Pick a theme, move the artwork on the 3×3 grid, and adjust colors.
- A format with a problem says what to fix (try a pale text color to see the contrast check fail).
- Export SVG for editing or PNG for posting.
How it works
- Layout is computed per format from the frame size: safe margins, an artwork box and a text box, then baselines for date, headline, tagline and button.
- Contrast uses the WCAG relative-luminance formula.
- Output is plain SVG with no external references; a test checks that, and that all 108 combinations of theme, placement and format pass for the sample brief.
Download
No download yet. A download appears here only after the package is built from reviewed code, installed and tested.
Tested versions & limits
- Pass Unit: all 108 theme x placement x format combinations pass the checks Node 22, Linux
- Pass Unit: WCAG contrast; weak palette flagged Node 22, Linux
- Pass Unit: long copy wraps and shrinks inside the safe area Node 22, Linux
- Pass Unit: SVG size, escaping, no external references Node 22, Linux
- Pass Browser: four formats, contrast flag, PNG export at 1080x1920 Chromium (Playwright), 1280px
Last verified 2026-10-31.
A parametric layout tool with original artwork; no generative AI.
Details
- Input
- Original fictional brief and allowed reference images
- Output
- Preview, variants and exports
- Runs in
- Any modern browser. Runs locally; nothing is uploaded, and no image model is used.
- Source
- Original parametric layout engine, rebuilt from scratch without generative AI. The earlier version used an image model.