{/* Controls */}
{Object.entries(MARKS).map(([k, mk]) => (
))}
{m.twoColor && (
)}
{[256, 512, 1024, 2048].map((s) => (
))}
Output: {exportW} × {exportH} px
{/* Preview */}
/, '').replace(/width="\d+"/, 'width="100%"').replace(/height="\d+"/, 'height="auto"').replace(/
{m.label} · {exportW}×{exportH} · {bg === 'transparent' ? 'no bg' : bg}
);
}
/* === Banner / OG generator with custom dimensions ============== */
function CustomCanvasGenerator() {
const [preset, setPreset] = useState('og');
const [customW, setCustomW] = useState(1200);
const [customH, setCustomH] = useState(630);
const [headline, setHeadline] = useState('Materially smarter construction.');
const [accent, setAccent] = useState('smarter');
const [sub, setSub] = useState('Plan, source, move and prove every material on every project.');
const [theme, setTheme] = useState('navy');
const [layout, setLayout] = useState('standard');
const [download, setDownload] = useState(null);
const canvasRef = useRef(null);
const presets = {
og: { w: 1200, h: 630, label: 'Open Graph · 1200×630' },
square: { w: 1200, h: 1200, label: 'Square · 1200×1200' },
li_personal: { w: 1584, h: 396, label: 'LinkedIn personal · 1584×396' },
li_company: { w: 1128, h: 191, label: 'LinkedIn company · 1128×191' },
twitter: { w: 1500, h: 500, label: 'X / Twitter header · 1500×500' },
yt_channel: { w: 2560, h: 1440, label: 'YouTube channel art · 2560×1440' },
yt_thumb: { w: 1280, h: 720, label: 'YouTube thumbnail · 1280×720' },
fb_cover: { w: 1640, h: 859, label: 'Facebook cover · 1640×859' },
ig_post: { w: 1080, h: 1080, label: 'Instagram post · 1080×1080' },
ig_story: { w: 1080, h: 1920, label: 'Instagram story · 1080×1920' },
pinterest: { w: 1000, h: 1500, label: 'Pinterest pin · 1000×1500' },
email: { w: 1200, h: 320, label: 'Email signature · 1200×320' },
zoom: { w: 1920, h: 1080, label: 'Zoom background · 1920×1080' },
desktop: { w: 2560, h: 1440, label: 'Desktop wallpaper · 2560×1440' },
mobile: { w: 1080, h: 1920, label: 'Mobile wallpaper · 1080×1920' },
custom: { w: customW, h: customH, label: 'Custom' },
};
const themes = {
navy: { bg: '#121541', fg: '#FFFFFF', accent: '#F7EC33', sub: '#B4B7D4', mark: '#F7EC33' },
yellow: { bg: '#F7EC33', fg: '#0E1034', accent: '#0E1034', sub: 'rgba(14,16,52,.65)', mark: '#0E1034' },
paper: { bg: '#FFFFFF', fg: '#0E1034', accent: '#121541', sub: '#475467', mark: '#121541' },
inkBlack:{ bg: '#03040E', fg: '#FFFFFF', accent: '#F7EC33', sub: '#8488B6', mark: '#F7EC33' },
minimal: { bg: '#F8F9FC', fg: '#121541', accent: '#E0D420', sub: '#475467', mark: '#121541' },
};
const drawArrow = (ctx, x, y, size, fill) => {
const scale = size / 120.13;
ctx.save();
ctx.translate(x - 7.925 * scale, y - 9.935 * scale);
ctx.scale(scale, scale);
const p = new Path2D(LG_ARROW_PATH);
ctx.fillStyle = fill;
ctx.fill(p, 'evenodd');
ctx.restore();
};
const render = () => {
const c = canvasRef.current;
if (!c) return;
const p = presets[preset];
const w = p.w, h = p.h;
c.width = w; c.height = h;
const t = themes[theme];
const ctx = c.getContext('2d');
ctx.fillStyle = t.bg;
ctx.fillRect(0, 0, w, h);
// Layout-driven decorations
if (layout !== 'minimal') {
ctx.globalAlpha = 0.1;
const bigArrow = Math.max(w, h) * 0.75;
drawArrow(ctx, w - bigArrow * 0.55, -bigArrow * 0.15, bigArrow, t.accent);
ctx.globalAlpha = 1;
}
const tWidth = Math.min(w - 160, 1100);
const baseUnit = Math.min(w, h * 1.6) / 15;
// Top-left wordmark cluster
const emblemSize = Math.min(w, h) * 0.075;
drawArrow(ctx, 80, 90, emblemSize, t.mark);
ctx.fillStyle = t.fg;
ctx.font = `700 ${baseUnit * 0.2}px Inter, system-ui, sans-serif`;
ctx.textBaseline = 'middle';
ctx.fillText('NEXUS REGEN', 80 + emblemSize + 14, 90 + emblemSize / 2);
if (layout === 'minimal') {
// Mark-only layout: centred big mark
const big = Math.min(w, h) * 0.45;
drawArrow(ctx, w / 2 - big / 2 + 7.925 * (big / 120.13), h / 2 - big / 2 + 9.935 * (big / 120.13), big, t.mark);
// Small URL bottom
ctx.font = `600 ${baseUnit * 0.22}px 'JetBrains Mono', ui-monospace, monospace`;
ctx.fillStyle = t.sub;
ctx.textAlign = 'center';
ctx.fillText('nexusregen.com', w / 2, h - 60);
ctx.textAlign = 'left';
finish();
return;
}
// Headline + accent-word logic
const hSize = baseUnit * (layout === 'tall' ? 0.85 : 1);
ctx.font = `600 ${hSize}px Inter, system-ui, sans-serif`;
ctx.fillStyle = t.fg;
const words = headline.split(' ');
const lines = [];
let line = '';
for (const wd of words) {
const test = line ? line + ' ' + wd : wd;
if (ctx.measureText(test).width > tWidth && line) {
lines.push(line);
line = wd;
} else {
line = test;
}
}
if (line) lines.push(line);
const startY = h * (layout === 'tall' ? 0.32 : 0.42);
const lh = hSize * 1.05;
lines.forEach((l, i) => {
if (accent && l.includes(accent)) {
const parts = l.split(accent);
let x = 80;
for (let pIdx = 0; pIdx < parts.length; pIdx++) {
if (parts[pIdx]) {
ctx.fillStyle = t.fg;
ctx.fillText(parts[pIdx], x, startY + i * lh);
x += ctx.measureText(parts[pIdx]).width;
}
if (pIdx < parts.length - 1) {
ctx.fillStyle = t.accent;
ctx.fillText(accent, x, startY + i * lh);
x += ctx.measureText(accent).width;
}
}
} else {
ctx.fillText(l, 80, startY + i * lh);
}
});
if (sub) {
ctx.font = `400 ${baseUnit * 0.32}px Inter, system-ui, sans-serif`;
ctx.fillStyle = t.sub;
// Wrap subhead too
const subWords = sub.split(' ');
const subLines = [];
let sl = '';
for (const sw of subWords) {
const test = sl ? sl + ' ' + sw : sw;
if (ctx.measureText(test).width > tWidth && sl) { subLines.push(sl); sl = sw; } else { sl = test; }
}
if (sl) subLines.push(sl);
const subStart = startY + lines.length * lh + baseUnit * 0.35;
subLines.forEach((l, i) => ctx.fillText(l, 80, subStart + i * baseUnit * 0.42));
}
ctx.font = `600 ${baseUnit * 0.22}px 'JetBrains Mono', ui-monospace, monospace`;
ctx.fillStyle = t.sub;
ctx.fillText('nexusregen.com', 80, h - 60);
const emBig = Math.min(w, h) * 0.1;
drawArrow(ctx, w - emBig - 80, h - emBig - 60, emBig, t.mark);
finish();
function finish() {
c.toBlob((blob) => {
if (blob) {
if (download) URL.revokeObjectURL(download);
setDownload(URL.createObjectURL(blob));
}
}, 'image/png');
}
};
useEffect(() => { render(); }, [preset, customW, customH, headline, accent, sub, theme, layout]);
const p = presets[preset];
return (
{preset === 'custom' && (
)}
{Object.entries(themes).map(([k, v]) => (
))}
{[
{ k: 'standard', l: 'Standard' },
{ k: 'tall', l: 'Tall' },
{ k: 'minimal', l: 'Minimal' },
].map((o) => (
))}
setHeadline(e.target.value)} style={inputStyle} />
setAccent(e.target.value)} style={inputStyle}
placeholder="(word inside headline to highlight)" />
setSub(e.target.value)} style={inputStyle} />
{ if (!download) e.preventDefault(); }}
style={{
textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
justifyContent: 'center', gap: 6,
background: 'var(--brand-600)', color: '#fff',
padding: '12px 14px', borderRadius: 8,
fontWeight: 700, fontSize: 13, fontFamily: 'var(--font-mono)',
border: '1px solid var(--brand-700)',
opacity: download ? 1 : 0.5,
pointerEvents: download ? 'auto' : 'none',
}}>
↓ Download {p.w}×{p.h} PNG
);
}
/* === Pattern generator — tileable arrow motif rendered on demand === */
function PatternGenerator() {
const [tile, setTile] = useState(120);
const [bg, setBg] = useState('#121541');
const [fg, setFg] = useState('#0E1034');
const [opacity, setOpacity] = useState(40);
const [angle, setAngle] = useState(0);
const [thickness, setThickness] = useState(0);
const [exportSize, setExportSize] = useState(1920);
const [download, setDownload] = useState(null);
const canvasRef = useRef(null);
const render = () => {
const c = canvasRef.current;
if (!c) return;
const w = exportSize, h = Math.round(exportSize * 9 / 16);
c.width = w; c.height = h;
const ctx = c.getContext('2d');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, w, h);
ctx.save();
if (angle) {
ctx.translate(w / 2, h / 2);
ctx.rotate((angle * Math.PI) / 180);
ctx.translate(-w / 2, -h / 2);
}
ctx.globalAlpha = opacity / 100;
const scale = tile / 120.13;
const pad = tile * 0.15;
const stride = tile + pad;
const stretch = Math.max(w, h) * 1.5;
for (let y = -stride; y < stretch; y += stride) {
for (let x = -stride; x < stretch; x += stride) {
ctx.save();
ctx.translate(x - 7.925 * scale, y - 9.935 * scale);
ctx.scale(scale, scale);
const path = new Path2D(LG_ARROW_PATH);
ctx.fillStyle = fg;
ctx.fill(path, 'evenodd');
if (thickness) {
ctx.strokeStyle = fg;
ctx.lineWidth = thickness;
ctx.lineJoin = 'round';
ctx.stroke(path);
}
ctx.restore();
}
}
ctx.restore();
c.toBlob((blob) => {
if (blob) {
if (download) URL.revokeObjectURL(download);
setDownload(URL.createObjectURL(blob));
}
}, 'image/png');
};
useEffect(() => { render(); }, [tile, bg, fg, opacity, angle, thickness, exportSize]);
return (
{[1280, 1920, 2560, 3840].map((s) => (
))}
{ if (!download) e.preventDefault(); }}
style={{
textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
justifyContent: 'center', gap: 6,
background: 'var(--brand-600)', color: '#fff',
padding: '12px 14px', borderRadius: 8,
fontWeight: 700, fontSize: 13, fontFamily: 'var(--font-mono)',
border: '1px solid var(--brand-700)',
opacity: download ? 1 : 0.5,
pointerEvents: download ? 'auto' : 'none',
}}>↓ PNG ({exportSize}px wide)
);
}
function S_GenLogo() {
return (
);
}
function S_GenBanner() {
return (
);
}
function S_GenPattern() {
return (
);
}
window.S_GenLogo = S_GenLogo;
window.S_GenBanner = S_GenBanner;
window.S_GenPattern = S_GenPattern;
