app
Hero Studio
Public Made by Adomby adom
The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the exported image also bakes the type pill (top right) and full wiki slug (bottom right); the page shows the hero bare, and only the homepage marquee overlays its own dynamic info. Every hero wears its P
← Commit history
Publish 0.5.1
5 files changed
+44−29
SKILL.md+7−9@@ -43,15 +43,13 @@ server-side (HERO_STUDIO_REQUIRED) unless the PNG carries the studio provenance color pickers instead. Placement is fixed for everyone; the palette is theirs. - Image-zone text: wordmark, title, value-prop subtitle, detail line. -## What exports, and what the page overlays--The exported PNG contains image content only: background art, title, subtitle,-screenshot. The lower-third band in the studio preview (type pill top right,-description, author, full owner/slug ref) is a SIMULATION of the live overlay the-wiki page renders at view time; it never bakes into the PNG, and live stats-(trending/stars/installs) default off in the sim because the marquee replaces them.-The description has one home: image subtitle when "Value-prop subtitle" is on,-otherwise the overlay band.+## What exports++The exported PNG carries: background art, title, subtitle, screenshot, the type+pill (top right), and the full wiki slug (bottom right). The pill and slug BAKE+into the image; the wiki page shows the hero exactly as exported, with no overlay+band. The only surface that overlays dynamic info (stats, author) is the homepage+marquee, and it brings its own, so keep the lower band of the image calm. ## Drive the posing state (posing aid, not generation)
data/pages.json+14−1@@ -1,4 +1,17 @@ [+ {+ "type": "app",+ "title": "Port Peek",+ "author": "",+ "score": 0,+ "stars": 0,+ "installs30d": 0,+ "brief": "What is listening on this box, and which process owns it. Works where ss and netstat are missing.",+ "tags": [],+ "updated_at": "2026-07-23T20:20:36.466Z",+ "owner": "kcknox",+ "slug": "port-peek"+ }, { "type": "app", "title": "Dice Lab",@@ -147,7 +160,7 @@ "score": 539, "stars": 0, "installs30d": 82,- "brief": "adom-lbr , the EDA library translator. Bring a component in from any supported EDA tool and convert it to any other (KiCad \u21c4 Altium \u21c4 EAGLE/Fusion) through one canonical adom-lbr JSON , symbol + footp",+ "brief": "adom-lbr , the EDA library translator. Bring a component in from any supported EDA tool and convert it to any other (KiCad ⇄ Altium ⇄ EAGLE/Fusion) through one canonical adom-lbr JSON , symbol + footp", "tags": [ "eda", "altium",
package.json+2−2@@ -2,8 +2,8 @@ "slug": "hero-studio", "title": "Hero Studio", "type": "app",- "version": "0.5.0",- "description": "The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the lower third is simulated only, because the wiki page overlays type pill, description, author, and the full owner/slug ref live at view time. Adom-org pages get the house wordmark and palette automatically; every other owner brings their own accent and background colors, with placement fixed for all. Includes screenshot bleeds, brand tile themes, gradient angles, pixel-faithful wiki marquee and index-card previews, and a component-hero mode with a photo/raytrace/phong fallback ladder.",+ "version": "0.5.1",+ "description": "The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the exported image also bakes the type pill (top right) and full wiki slug (bottom right); the page shows the hero bare, and only the homepage marquee overlays its own dynamic info. Adom-org pages get the house wordmark and palette automatically; every other owner brings their own accent and background colors, with placement fixed for all. Includes screenshot bleeds, brand tile themes, gradient angles, pixel-faithful wiki marquee and index-card previews, and a component-hero mode with a photo/raytrace/phong fallback ladder.", "license": "MIT", "tags": [ "hero",
page.json+2−2@@ -2,8 +2,8 @@ "slug": "hero-studio", "title": "Hero Studio", "type": "app",- "version": "0.5.0",- "description": "The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the lower third is simulated only, because the wiki page overlays type pill, description, author, and the full owner/slug ref live at view time. Adom-org pages get the house wordmark and palette automatically; every other owner brings their own accent and background colors, with placement fixed for all. Includes screenshot bleeds, brand tile themes, gradient angles, pixel-faithful wiki marquee and index-card previews, and a component-hero mode with a photo/raytrace/phong fallback ladder.",+ "version": "0.5.1",+ "description": "The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the exported image also bakes the type pill (top right) and full wiki slug (bottom right); the page shows the hero bare, and only the homepage marquee overlays its own dynamic info. Adom-org pages get the house wordmark and palette automatically; every other owner brings their own accent and background colors, with placement fixed for all. Includes screenshot bleeds, brand tile themes, gradient angles, pixel-faithful wiki marquee and index-card previews, and a component-hero mode with a photo/raytrace/phong fallback ladder.", "license": "MIT", "tags": [ "hero",
public/index.html+19−15@@ -239,6 +239,7 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po /* ---------- the lower-third textual overlay ---------- */ .pill-tr { position:absolute; top:2.4cqw; right:2.6cqw; z-index:6; }+.slug-br { position:absolute; right:2.6cqw; bottom:2.2cqw; z-index:6; } .lower { position:absolute; left:0; right:0; bottom:0; height:33.4%; z-index:4; background:linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.62) 22%, rgba(10,14,20,.94) 62%, rgba(10,14,20,.98) 100%);@@ -408,13 +409,12 @@ body[data-mode=component] .mode-app { display:none; } /* render mode: ?render=1 strips all chrome for the server-side PNG shot */ body[data-render] header, body[data-render] #panel, body[data-render] #contexts, body[data-render] #toasts, body[data-render] .guide { display:none !important; }-/* The lower-third band is a POSING SIMULATION of the page's live overlay- (pill, trending, stars, owner, url). Per the resolved rule, the image- carries the title; the overlay carries dynamic data, rendered by the page- at view time. Baking it would freeze live stats into the PNG forever and- double under the real overlay. Never export it. */+/* Per Colby (2026-07-23): the image carries the title, the type pill (top+ right), and the full slug (bottom right); the pill and slug BAKE into the+ PNG. The page shows the image bare. Only the homepage marquee overlays+ dynamic info (stats, author), and it brings its own, so the lower band+ sim never exports. */ body[data-render] .hero .lower { display:none !important; }-body[data-render] .pill-tr { display:none !important; } /* The dashed YOUR LOGO box is a posing placeholder, not content. No logo posed = nothing exported, not a placeholder. */ body[data-render] .wordmark.noadom { display:none !important; }@@ -560,14 +560,15 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh <button class="opt" data-v="image-only">Image only</button> <button class="opt" data-v="both">Both</button> </div>- <div class="hint">Resolved per John: the title lives in the IMAGE; the overlay carries only dynamic data (pills, scores, url). Image only is the default; the others remain for comparison.</div>+ <div class="hint">The image carries the title, the type pill (top right), and the full slug (bottom right); the page shows it bare. Only the marquee overlays dynamic info, and it brings its own. Image only is the default; the others remain for comparison.</div> </div> - <h3>Overlay content</h3>- <label class="chk"><input type="checkbox" id="chk-pill"> Type pill</label>- <label class="chk"><input type="checkbox" id="chk-scores"> Live stats (replaced by the marquee)</label>- <label class="chk"><input type="checkbox" id="chk-author"> Author</label>- <label class="chk"><input type="checkbox" id="chk-slug"> Wiki slug, lower right</label>+ <h3>Image badges (baked into the PNG)</h3>+ <label class="chk"><input type="checkbox" id="chk-pill"> Type pill, top right</label>+ <label class="chk"><input type="checkbox" id="chk-slug"> Wiki slug, bottom right</label>+ <div class="hint">The page shows the hero image as-is. Only the homepage marquee overlays dynamic info (stats, author), and it brings its own.</div>+ <label class="chk" style="display:none"><input type="checkbox" id="chk-scores"></label>+ <label class="chk" style="display:none"><input type="checkbox" id="chk-author"></label> <button class="btn btn-primary" id="btn-generate" data-tip="Render the current hero to a 2000x1250 PNG on the server, with provenance metadata">Generate hero PNG</button> <button class="btn" id="btn-reset">Reset to proposed default</button> </div>@@ -629,6 +630,7 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh </div> <div class="pill-tr" id="pill-tr"><span class="pill app" id="l-pill">APP</span></div>+ <div class="slug-br" id="slug-br"><a class="l-slug" id="l-slug" target="_blank" href="#"></a></div> <div class="lower"> <div class="lowerin"> <div class="lmain">@@ -652,12 +654,12 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh </div> <div class="l-right"> <span class="l-mpn" id="l-mpn"></span>- <a class="l-slug" id="l-slug" target="_blank" href="#"></a>+ </div> </div> </div> - <div class="guide"><span>overlay zone: lower 1/3, true text only</span></div>+ <div class="guide"><span>marquee overlays its info over this lower band; keep it calm</span></div> </div> <div id="contexts">@@ -808,7 +810,9 @@ function render() { $('el-desc').textContent = firstSentence(p.brief.slice(80), 110); $('win-label').textContent = p.title + ' · Adom webview'; - // lower third overlay+ // lower band: gone for app pages (the page shows the image bare); kept in+ // component mode for the MPN-in-overlay placement option+ hero.querySelector('.lower').style.display = mode === 'app' ? 'none' : ''; const showTitleInOverlay = mode === 'component' || state.titleMode !== 'image-only'; $('l-pill').style.display = state.overlay.pill ? '' : 'none'; $('l-pill').textContent = d.type.toUpperCase();