feat(landing): polish pass 2 — 9 fixes + cards overdrive + OG image#49
Merged
johnnichev merged 3 commits intomainfrom Apr 7, 2026
Merged
feat(landing): polish pass 2 — 9 fixes + cards overdrive + OG image#49johnnichev merged 3 commits intomainfrom
johnnichev merged 3 commits intomainfrom
Conversation
1. Trace nodes (#production): tool_selection / tool_execution labels were overflowing their button containers. Reduced font-size from 11px to 10px, removed letter-spacing, tightened padding from 10px 8px to 10px 6px, added overflow:hidden + white-space:nowrap so text fits even at narrow widths. 2. Enterprise @deprecated marker: "2 minors" was wrapping to two lines. Added white-space:nowrap and flex:0 0 auto to .ent-marker__count so the count stays on one line regardless of available width. 3. FAQ search placeholder: "search the docs..." was misleading because the input only filters FAQ items, not the actual docs site. Renamed to "search questions..." for honest copy. 4. Wordmark Variant 3 (terminal banner) was rendering at the bottom of the nav header instead of vertically centered. Two fixes: - .nav-logo gets display:inline-flex + align-items:center + height:100% so its content centers within the nav row - .wm--3 gets vertical-align:middle for inline contexts Now the banner sits in the middle of the header. 6. #see-difference drag-to-compare gets a desktop-only mouse-follow mode: hovering over the pane scrubs the slider position from 0 to 100 based on cursor X. Touch keeps the existing range input as the primary control. Visual feedback: cyan ring + ew-resize cursor when hovering. Hint copy updated from "drag to compare" to "move your cursor across". (Items 5, 7, 8, 9, OG image will follow in subsequent commits.)
Two related changes that go together because they share the new visual language: the SELECTOOLS terminal banner is now in README.md and docs/index.md, and the bland 4-card metric rows in #builder and the comparison section get the same overdrive treatment that the other landing sections received in PR #47. ## Card overdrive (#builder + comparison) Replaces 8 generic .card cells (4 below the visual builder, 4 below the comparison table) with .stat-card scoreboard tiles. Each card has a distinctive central visualization, distinct from any pattern in PR #46/#47 (not bento, not compliance shelf). Builder row (.stat-card--bytes / --deps / --nodes / --price): 1. 49KB — animated horizontal bar comparison: selectools 49KB cyan bar vs electron 67MB faint bar. Caption: "1400x lighter than electron". 2. 0 deps — mini package.json snippet showing "dependencies": {} with the empty braces highlighted in cyan and pulsing on a 1.6s loop. 3. 8 nodes — SVG mini-graph: 8 connected dots in a flow pattern (2-2-1-2-1 layout). Edges scan-draw in sequence on viewport entry via stroke-dasharray animation. 4. $0 — strikethrough "$39 / seat / mo" above a giant cyan-glowing "$0" with "FOREVER" caption. Comparison row (.stat-card--code / --latency / --tests / --cost): 5. 1 line — actual highlighted Python code snippet showing AgentGraph.chain(planner, writer, reviewer).run("prompt") with strikethrough "25 lines (LangGraph)" comparison line. 6. <0.5ms — semicircle latency dial (SVG arc) with the cyan fill at ~3% of the 0..10ms range. Shows just how negligible the overhead is. 7. 4612 — animated counter that ticks from 0 to 4,612 via requestAnimationFrame with easeOutCubic. Re-uses the enterprise counter pattern from PR #47, smaller scale. 8. $0.03 — itemized receipt with dashed border showing 40 test cases, 3 providers, 20 judge calls, with a total line. Concrete proof of the cost claim, not just the number. Shared CSS atoms (.stat-card, .stat-card__viz, .stat-card__metric, .stat-card__sub, .stat-card__compare). 230px min-height. Stagger reveal via .stat-row.in-view + nth-child transition-delays. Cyan ring + glow on hover (pointer:fine only). 4-col grid → 2-col at 1024px → 1-col at 600px. JS observer added: one IntersectionObserver IIFE that finds all .stat-row[data-stat-row] and wires up the in-view trigger + the counter tick (any element with data-counter-target inside the row). Reduced motion: cards snap visible, bar fills snap to final width, SVG edges show fully drawn, dial fills to final position, counter shows the final value, JSON pulse killed. ## README.md + docs/index.md Adds the SELECTOOLS terminal banner art (the 3-row box-drawing rendering used by Wordmark Variant 3 in the nav) at the top of both README.md and docs/index.md. Just three lines of box-drawing chars in a fenced code block. Renders fine on GitHub and in MkDocs.
…tering
Three follow-up items from the polish pass:
1. Comparison table polish (item 9): light touch, no full redesign
because tables should stay scannable. Three improvements:
- Verdict cells (.yes/.no/.mid) get pill-shaped backgrounds with
subtle borders. Each verdict is now a colored badge instead of
plain text, which makes the table scannable at a glance.
- The selectools column (col 2) gets a subtle cyan tint background
and a 2px cyan inset shadow on the left edge. The eye now goes
straight to the "winner" column without enlarging the column.
- Subtle row hover state on mouse devices (cyan tint), helps follow
a single feature row across columns. Coarse pointers skip this.
2. OG image (extra item): the meta tags referenced
/assets/og-image.svg but the file didn't exist. Created the SVG
(1200x630) showing a mac terminal window with the SELECTOOLS
terminal banner art rendered in cyan with glow filter, the
tagline "Production-ready AI agents in plain Python.", a feature
sub-tagline, "$ pip install selectools" in a cyan-bordered frame,
and the full v0.20.1/license/providers footer line.
Rendered to PNG via Playwright (better social media compatibility
than SVG since some crawlers don't render SVG). PNG is 238KB,
exact 1200x630 dimensions. Updated meta tags to reference
og-image.png with og:image:type and og:image:alt.
3. Wordmark Variant 3 vertical centering (continuation of item 4):
the previous fix targeted the wrong .nav-logo rule. There are TWO
.nav-logo definitions in the source (one near other nav styles,
one near the "logo wink" section later in the file). The later
one wins via cascade order, and it had display:inline-block. Now
it has display:inline-flex + align-items:center + height:100%, so
the banner centers vertically. Verified: nav midY = 28, banner
midY = 27.5 (alignment within 0.5px is sub-pixel).
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
1 participant
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.
Summary
Pass 2 of the landing polish work. Nine fixes from feedback + a fresh OG image to match the new SELECTOOLS terminal banner brand.
What's in here
Cards overdrive (the biggest change)
Both stat-card rows share the new `.stat-card` shell (220-230px tall, gradient bg, cyan ring on hover, stagger reveal via .stat-row.in-view + nth-child delays). Each card has a distinct central visualization, intentionally different from the bento (PR #46) and the compliance shelf (PR #47).
Builder row (`.stat-card--bytes / --deps / --nodes / --price`):
Comparison row (`.stat-card--code / --latency / --tests / --cost`):
5. 1 line — actual highlighted Python: `AgentGraph.chain(planner, writer, reviewer).run("prompt")` with strikethrough "25 lines (LangGraph)" comparison line.
6. <0.5ms — semicircle latency dial (SVG arc) with cyan fill at ~3% of the 0..10ms range. Shows just how negligible the overhead is.
7. 4612 — animated counter that ticks from 0 → 4,612 via requestAnimationFrame with easeOutCubic.
8. $0.03 — itemized dashed-border receipt: 40 test cases / 3 providers / 20 judge calls, with a total line. Concrete proof of the cost claim.
JS observer added: one IIFE that finds all `.stat-row[data-stat-row]` and wires up the in-view trigger + the counter tick (any element with `data-counter-target`). Reduced motion: cards snap visible, bars/edges/dial/counter snap to final state.
OG image
Created `landing/assets/og-image.svg` showing a mac terminal window framing with the SELECTOOLS terminal banner art rendered in cyan with a glow filter. Tagline below, "$ pip install selectools" in a cyan-bordered frame, footer with version/license/providers, "[•] selectools" wordmark in the bottom-right.
Rendered to PNG via Playwright at exact 1200x630 dimensions. Better social media compatibility than SVG (some crawlers don't render SVG OG images). Meta tags now reference og-image.png with og:image:type and og:image:alt.
Note for reviewer: GitHub repo social preview is set in repo Settings > General > Social preview. Upload `landing/assets/og-image.png` there manually after merge.
Test plan