Home page: product artwork, rebuilt compatibility diagram, shader stages - #1206
Merged
Merged
Conversation
…ages Replaces the placeholder illustrations on the OpenUI and Gateway bands with real artwork, rebuilds the compatibility diagram, and adds a shader layer behind each product stage. The -light / -dark suffix on the artwork is the picture's own tone, not the page theme: the Cloud band is black on a light page and white on a dark one, so it needs the opposite asset in each. The compatibility diagram's centre is one element spanning all four rows rather than four stacked cells, because stacked cells each cast their shadow onto their neighbours, which are the rest of the same column. Llama, LlamaIndex and Mastra are left out of the diagram: no mark could be found for any of them, and a row is better short than represented by a related company's logo. --openui-foreground is pinned to white on the home page's own root rather than on .homeTheme. The token is declared in the react-ui package and read in 167 places across the site, and .homeTheme covers thirteen marketing routes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… bands The bands were drawn wide. On a phone that meant a squeezed desktop picture, a horizontal card scroller, and a description stranded above the artwork it describes. Everything here is scoped to the 767px breakpoint; desktop renders exactly as it did before. - Phone artwork: each stage carries a second 1440x1200 drawing, switched by a display:contents wrapper so the existing theme rules still pick the tone. The wrapper sidesteps a specificity race, since [data-theme="dark"] .x outranks a .x inside a media query. - Shader: phone-width screens get more wave cycles and a thinner line, because a phone shows so little of the preset that it reads as one flat swell. Keyed off the viewport, so every shader on a screen matches. - Descriptions move below the stage: .lockup becomes display:contents and its children take an order, rather than duplicating the copy. - Gateway's cards render as FeatureGridSection accordion rows, matching the grid under the Lang band. So a band can re-point the grid's colours, each --fg-* token now reads a --feature-grid-* override first: .section declares --fg-* on itself, so a value inherited under the same name would lose to it. - The Cloud heading drops out, the band separator fades at both ends, and the Lang band sits closer to the grid that states its capabilities. Also fixes the tweet wall, which clipped the right edge off every card and overlapped its columns: the column sizes its border box, so a flat 230px basis left only 198px of content box while the slot inside was a fixed 320px. The column is now 262px (the card plus its 16px of shadow bleed) and the slot a percentage, which under zoom resolves in its own scaled space and so tracks the column. The feature grid's vertical dividers now fade at their ends, which shows on every page that uses it: benchmarks, cloud, gateway, observability, openclaw-os and pricing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Aditya-thesys
previously approved these changes
Sep 21, 2026
The only conflict was pnpm-lock.yaml, which .gitattributes marks merge=binary so git will not attempt it. Resolved by taking main's lockfile and regenerating with pnpm install --lockfile-only, which keeps every one of main's pins and adds this branch's one dependency on top. The regenerated lockfile differs from main's by +60 / -0 lines: the shaders entry for docs and its dependency tree. shaders, typegpu, tinyest, tsover-runtime and typed-binary all resolve to the same versions this branch was built and tested against; 3.2.470 is also still the latest shaders on npm, so nothing drifted. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Aditya-thesys
previously approved these changes
Sep 22, 2026
…sing CTA (#1211) * feat(observability): rework the page's diagram, features and closing CTA The page was a set of sections that each looked right on a wide screen and came apart on a phone. This reworks the argument it makes and fixes what phone width did to it. - The trace gap diagram was two panels of badges, status marks and per-row descriptions. It is now one card split down the middle: a heading pair per side and four plain rows, each row opposite the one it answers. The halves share a height and their lists use equal rows, so line n on the left stays level with line n on the right whichever wraps. - The trust block moved from below the setup steps to directly under Insights, where the feature flow ends on what the product learns from a session and a reader starts wondering where that data goes. Setup keeps the grey; trust now sits on the page. - The closing CTA is a centred column rather than a title and a field on opposite sides of 1200px: offer, title, field, pricing. Its "View pricing" is now the same tertiary Button the trust section uses. - Feature cards on a phone read heading, image, then description. The orders are absolute rather than relative, because the cards alternate which side the art takes on desktop and a relative rule would have given odd and even cards different mobile orders. - The feature shots kept their artwork's own 1.8 ratio on a phone. A 4/3 stage was cutting a quarter of the width off every screenshot, straight through the UI, and the per-image object-position offsets underneath it were chasing that crop rather than removing it. - The setup snippet renders at its desktop measure and scales down, so the code keeps its proportions instead of losing its right-hand half. Three shared Cloud files gain opt-in hooks rather than new behaviour: --cloud-code-mobile-zoom, --cloud-code-mobile-padding-block and --cloud-setup-content-display all default to what they do today, so /cloud/gateway is unchanged. Verified: its panel still has zoom 1 and its steps still precede the code. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(observability): re-encode the feature art, same pixels at 1/7 the size The WebP conversion behind the new artwork ran a lossless encode at minimal compression effort and carried the source ICC profile through into a VP8X container. Nothing was compressed to a lower quality; the encoder simply did not try. The fourteen files landed at 9.03 MB against the 3.11 MB they replaced. Re-encoded with `cwebp -z 9 -metadata none`. Lossless at maximum effort, which on flat UI screenshots with an alpha channel beats lossy -q 90 on size as well as on fidelity, so there is no reason to take the quality hit. before this branch 3.11 MB as committed 9.03 MB now 1.27 MB Every file verified: decoded both versions to PNG and compared SHA-256. Identical after decode, so this is a pure size change with no visual diff. insights keeps the genuine 1440 -> 2880 upgrade this branch gave it. Reproduce: for f in docs/public/openui-observability/*.webp; do dwebp -quiet "$f" -o /tmp/r.png && cwebp -quiet -z 9 -metadata none /tmp/r.png -o "$f" done Separate from this: the <Image> elements in FeaturesSection still set `unoptimized`, so the sizes hint beside it is inert and a phone pulls the full 2880px file into a ~343px slot. --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Aditya-thesys <aditya@thesys.dev>
Aditya-thesys
approved these changes
Sep 22, 2026
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Product bands
Real artwork replaces the placeholder illustrations on the OpenUI and Gateway bands. Six images, light and dark per band, at 1120x440 (2x sources).
products.tswas already written for this: each band now setsshotandProductSectioncomposes the light/dark pair. The-light/-darksuffix is the picture's own tone, not the page theme, because the Cloud band is black on a light page and white on a dark one and needs the opposite asset in each.The observability card was a narrow column beside its copy, which made its visual roughly half the width of the reliability band's. It now uses the same shape as a ProductSection band, copy across the top and a full-width stage below, so the two match. A rule divides them.
Compatibility diagram
Rebuilt. Four rows, each two bands of square logo cells drifting inward behind a centre column that names the layer and stays put. Every row runs the same animation pair with no stagger, so cell edges line up down the diagram and it reads as a single grid rather than four strips.
The centre is one element spanning all four rows rather than four stacked cells. Stacked cells each cast their shadow onto their neighbours, which are the rest of the same column.
Logos updated to the current stack. Llama, LlamaIndex and Mastra are left out: no mark could be found for any of them, and a row is better short than represented by a related company's logo.
The band's heading moved below the diagram and gained a caption. The diagram is images plus a visually hidden list, so none of this band's claim appeared in crawlable body text before.
Shader
Adds
shadersand the "Faded Dither" preset behind each product stage, loaded client-only since it is WebGPU. Two tones, picked by the ground the stage actually sits on rather than by the page theme, since the Cloud band inverts.Elsewhere on the page
--openui-foregroundisrgb(253,253,253), two levels off white, and sections painting pure#fffsat on it so the step read as a faint frame. The token is pinned on the home page's own root, not on.homeTheme, which covers thirteen marketing routes.overflow: hidden.Notes for review
pnpm addre-sorteddocs/package.json's dependencies block. The only addition isshaders; codemirror,react-resizable-panelsandsemverwere already there and only moved.shadersis a new third-party runtime dependency (1.38MB ESM, dynamically imported). Worth confirming its licence terms for production use before merge.next buildpasses.🤖 Generated with Claude Code