From e41d71d403be4dfed370fac0acfb6935c4ce48d5 Mon Sep 17 00:00:00 2001 From: Markus Graf Date: Sun, 29 Mar 2026 17:59:47 +0200 Subject: [PATCH] fix(03): soft radial mask for forest elements and green background prompt - CSS radial-gradient mask for organic blending into forest scene - Generate with light green background instead of transparency (avoids checkerboard) Co-Authored-By: Claude Opus 4.6 (1M context) --- src/forest/reward.ts | 2 +- src/styles/main.css | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/forest/reward.ts b/src/forest/reward.ts index 745fcb1..96200f8 100644 --- a/src/forest/reward.ts +++ b/src/forest/reward.ts @@ -115,7 +115,7 @@ async function generateForestElement(db: IDBDatabase): Promise<{ ELEMENT_TYPES[Math.floor(Math.random() * ELEMENT_TYPES.length)]!; // Build prompt - const prompt = `Kinderbuch-Illustration, Aquarell-Stil, ${elementType}, magischer Wald, warm, einladend, fuer Kinder, Pastellfarben, kein Text, einzelnes Element auf transparentem Hintergrund`; + const prompt = `Kinderbuch-Illustration, Aquarell-Stil, ${elementType}, magischer Wald, warm, einladend, fuer Kinder, Pastellfarben, kein Text, einfarbig heller gruener Hintergrund`; // Generate image const blob = await generateImage(prompt, referenceImages, config); diff --git a/src/styles/main.css b/src/styles/main.css index 0896aef..cba954e 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -417,9 +417,11 @@ h3 { .forest__element img { max-width: 100%; max-height: 100%; - object-fit: contain; - border-radius: 8px; + object-fit: cover; + border-radius: 50%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); + mask-image: radial-gradient(ellipse 70% 70% at center, black 50%, transparent 100%); + -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, black 50%, transparent 100%); } .forest__element--new {