diff --git a/website/app/globals.css b/website/app/globals.css index a871273f..a5c0e3c4 100644 --- a/website/app/globals.css +++ b/website/app/globals.css @@ -725,6 +725,89 @@ a { color: inherit; text-decoration: none; } .provider-card dd { margin: 0; color: #c3baaa; } .provider-card-links { display: flex; flex-wrap: wrap; gap: 24px; } .provider-showcase-links { display: flex; flex-wrap: wrap; gap: 26px; } +.scenario-section { padding-block: 150px; } +.scenario-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; + margin-top: 70px; +} +.scenario-panel { + padding: 34px; + border: 1px solid var(--line-strong); + background: #1b1913; +} +.scenario-panel h3 { margin: 0 0 24px; font-size: 26px; line-height: 1.1; } +.scenario-panel > p { + margin: 24px 0 0; + color: #aaa293; + font-size: 13px; + line-height: 1.7; +} +.scenario-strip { + display: grid; + gap: 1px; + border: 1px solid var(--line); + background: var(--line); +} +.scenario-strip-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } +.scenario-strip figure { margin: 0; background: #12100d; } +.scenario-strip img { + display: block; + width: 100%; + height: auto; + background: #0d0c09; +} +.scenario-strip-chain img { image-rendering: pixelated; } +.scenario-strip figcaption { + padding: 9px 10px; + border-top: 1px solid var(--line); + color: #857e70; + font-family: var(--font-geist-mono), monospace; + font-size: 10px; + line-height: 1.4; +} +.scenario-strip figcaption b { display: block; color: var(--ember-light); font-weight: 600; } +.scenario-bottom { + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); + gap: 18px; + margin-top: 18px; +} +.scenario-snippet, .scenario-panel, .scenario-facts { min-width: 0; } +.scenario-snippet { + padding: 28px 34px; + border: 1px solid var(--line-strong); + background: #1b1913; +} +.scenario-snippet pre { + margin: 0; + overflow-x: auto; + color: #d8cfbd; + font-family: var(--font-geist-mono), monospace; + font-size: 11px; + line-height: 1.7; +} +.scenario-snippet p { margin: 22px 0 0; color: #aaa293; font-size: 13px; line-height: 1.7; } +.scenario-facts { + margin: 0; + border: 1px solid var(--line-strong); + background: #1b1913; +} +.scenario-facts div { + display: grid; + grid-template-columns: 120px 1fr; + gap: 20px; + padding: 18px 30px; + border-top: 1px solid var(--line); + font-size: 12px; + line-height: 1.6; +} +.scenario-facts div:first-child { border-top: 0; } +.scenario-facts dt { color: #857e70; font-family: var(--font-geist-mono), monospace; font-size: 10px; text-transform: uppercase; } +.scenario-facts dd { margin: 0; color: #c3baaa; } +.scenario-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; } + .safety-section { padding-block: 140px; @@ -1000,6 +1083,7 @@ a { color: inherit; text-decoration: none; } .review-grid { grid-template-columns: 1fr; } .review-copy { max-width: 720px; } .provider-showcase-grid { grid-template-columns: 1fr; } + .scenario-grid, .scenario-bottom { grid-template-columns: minmax(0, 1fr); } .lock-visual { width: min(680px, calc(100% - 35px)); } .docs-layout { grid-template-columns: 170px minmax(0, 1fr); } .docs-toc { display: none; } @@ -1028,7 +1112,10 @@ a { color: inherit; text-decoration: none; } .proof-grid > div { min-height: 92px; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); } .proof-grid p { grid-column: auto; padding: 24px 0 27px; } .split-heading { grid-template-columns: 1fr; gap: 30px; } - .workflow-section, .provider-showcase-section, .capabilities-section, .install-section { padding-block: 95px; } + .workflow-section, .provider-showcase-section, .scenario-section, .capabilities-section, .install-section { padding-block: 95px; } + .scenario-panel, .scenario-snippet { padding: 22px; } + .scenario-strip-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .scenario-facts div { grid-template-columns: 1fr; gap: 6px; padding: 16px 22px; } .workflow-grid { grid-template-columns: 1fr; margin-top: 48px; } .workflow-grid article { min-height: 400px; padding: 30px 0; border-right: 0; border-top: 1px solid var(--line); } .safety-section, .generator-section, .review-section, .cast-section { padding-block: 95px; } diff --git a/website/app/lib/analytics.ts b/website/app/lib/analytics.ts index 27b1f661..3a306a41 100644 --- a/website/app/lib/analytics.ts +++ b/website/app/lib/analytics.ts @@ -16,6 +16,7 @@ export type CtaSection = | "safety" | "generator" | "provider_showcase" + | "scenario" | "docs_index" | "docs_sidebar" | "docs_search" diff --git a/website/app/page.tsx b/website/app/page.tsx index cbcde8c8..a5fbdba2 100644 --- a/website/app/page.tsx +++ b/website/app/page.tsx @@ -665,6 +665,120 @@ export default function Home() { +
+
+
+

Scenario, measured

+

Cheap models.
A real pipeline.
Honest limits.

+
+

+ We ran Scenario's catalogue through PixelKiln: ten text-to-image + models priced from 1 to 11 compute units, six single-image tool + models, reference-image edits, a three-model chain, and a real + isometric pixel-art game's structures, covers, backdrops, and sound + effects. Every paid request is preceded by a free quote and held + under a ceiling you set. These are our own benchmark images, one + sample each. +

+
+ +
+
+

Price does not predict fit

+
+
+ A pixel-art stone keep on a mountain from FLUX.2 Klein 9b +
1 CU FLUX.2 Klein 9b
+
+
+ A pixel-art mossy cave mountain from Krea 2 Turbo +
2 CU Krea 2 Turbo
+
+
+ A pixel-art castle on a cliff from Ernie Image Turbo +
3 CU Ernie Image Turbo
+
+
+ A detailed pixel-art stone keep with banners from GPT Image 2 +
11 CU GPT Image 2
+
+
+

+ The same brief, seed, and 512 px request to four models. The 1 and + 2 CU models gave a usable silhouette and the most authentic pixel + texture; GPT Image 2 followed the brief best. None returned a + native-grid, closed-palette asset, and four ignored the requested + canvas size. +

+
+ +
+

Render, pixelate, cut out, refine

+
+
+ A knight rendered by FLUX.2 Klein 9b on a white background +
1 CU render
+
+
+ The knight pixelated onto a 32-colour palette +
5 CU Pixelate
+
+
+ The pixelated knight with its background removed +
2 CU Birefnet cutout
+
+
+ The final 64 by 64 transparent knight sprite after refinement +
free refine, 64×64
+
+
+

+ One manifest, one pixelkiln gen, 8 CU: each step names its + parent's style, so the chain runs in order and a 64×64 transparent + sprite lands at the end, held at the same review gate as any other + asset. On a real game's 240 px landmarks the same chain returned + the sprite's exact size at high confidence with far more detail. +

+
+
+ +
+
+
{`"assets": {
+  "knight":    { "styles": ["render"],   "prompt": "…" },
+  "knight-px": { "styles": ["pixelate"], "prompt": "pixelate",
+    "revision": { "mode": "image-to-image",
+                  "from": "knight", "fromStyle": "render" } }
+}`}
+

+ revision.fromStyle lets a style that uses one model + revise another style's output, so a chain across models is declared, + priced, and ordered instead of stitched by hand. +

+
+
+
Where it fits
Large landmarks, covers and key art with legible text, flat backdrops, image-to-image edits at 1 CU, and cheap sound effects
+
Where it does not
32 px props, characters, terrain tiles and cliff blocks, which stay on a tool built for them
+
Cost control
A free quote before every paid call, a per-style ceiling, and a command budget
+
+
+ +
+ + Set up Scenario + + + Chain models across styles + + + Read the game pilot ↗ + + + Inspect the model bake-off ↗ + +
+
+
diff --git a/website/public/benchmarks/provider-scenario-showcase/chain-1-render.png b/website/public/benchmarks/provider-scenario-showcase/chain-1-render.png new file mode 100644 index 00000000..47953eb5 Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/chain-1-render.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/chain-2-pixelate.png b/website/public/benchmarks/provider-scenario-showcase/chain-2-pixelate.png new file mode 100644 index 00000000..2e9d8d64 Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/chain-2-pixelate.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/chain-3-cutout.png b/website/public/benchmarks/provider-scenario-showcase/chain-3-cutout.png new file mode 100644 index 00000000..4c3636e9 Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/chain-3-cutout.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/chain-4-refined.png b/website/public/benchmarks/provider-scenario-showcase/chain-4-refined.png new file mode 100644 index 00000000..a244a649 Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/chain-4-refined.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/ernie-3cu.png b/website/public/benchmarks/provider-scenario-showcase/ernie-3cu.png new file mode 100644 index 00000000..998b2af3 Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/ernie-3cu.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/gpt-11cu.png b/website/public/benchmarks/provider-scenario-showcase/gpt-11cu.png new file mode 100644 index 00000000..d034113e Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/gpt-11cu.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/klein-1cu.png b/website/public/benchmarks/provider-scenario-showcase/klein-1cu.png new file mode 100644 index 00000000..800eaf2b Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/klein-1cu.png differ diff --git a/website/public/benchmarks/provider-scenario-showcase/krea-2cu.png b/website/public/benchmarks/provider-scenario-showcase/krea-2cu.png new file mode 100644 index 00000000..c3c706af Binary files /dev/null and b/website/public/benchmarks/provider-scenario-showcase/krea-2cu.png differ