feat(landing): overdrive 4 sections — 4 distinct visual genres#46
Merged
johnnichev merged 1 commit intomainfrom Apr 7, 2026
Merged
feat(landing): overdrive 4 sections — 4 distinct visual genres#46johnnichev merged 1 commit intomainfrom
johnnichev merged 1 commit intomainfrom
Conversation
Replaces the 4 templated icon-card grid sections (Why / What's
Included / Built For / Three Paths) with 4 completely different
visual treatments. Each section now has its own visual genre instead
of being a content variant of the same card-grid template.
Skills invoked: /bolder + /animate + /delight + /overdrive (per
user request to "make this unforgettable"), guided by /frontend-design
anti-patterns and the existing .impeccable.md design context.
Process: I used Playwright to capture baseline screenshots of each
section, then iterated visually after each section was implemented.
Caught and fixed two layout bugs that pure code review would have
missed (bento gap on row 2, code-line wrapping in Path 2 terminal).
──────────────────────────────────────────────────────────────────
SECTION 1 — "Three problems every agent team hits"
Before: 3 cards in a row, icon + heading + 3-line paragraph
After: 3 stacked vignettes with oversized 01/02/03 numerals,
strike-through pain headlines, and side-by-side "what
you see" / "what you get" terminal diffs with red pain
glow and cyan fix glow
Each vignette shows REAL code: a broken LangChain stack trace
next to selectools' result.trace output, a CrewAI log leaking
PII vs selectools' [REDACTED] output, a Stripe receipts list
vs result.usage.total_cost. The diff format is the visual
primitive — same content the original had, but the diff effect
does emotional work no icon-card ever could.
Tech: scroll-triggered .in-view class via IntersectionObserver
(threshold 0.25, rootMargin -10% bottom) for staggered fade-up.
Sticky-positioned numerals on desktop so they stay visible while
the body scrolls. Reduced-motion: snap to visible, kill glow.
──────────────────────────────────────────────────────────────────
SECTION 2 — "One install. Everything built in."
Before: 8 identical cards in a 4×2 grid + 4 more in a 2×2 grid
After: Asymmetric 6-column bento mosaic with deliberate
hierarchy:
- Hero cell: 3×2 "50 Evaluators" with live mini bar
chart (Deterministic 30 / LLM-judge 20 / Coverage
95) animated from 0% via .in-view trigger
- Two wide cells: pinned to row 1 cols 4-6 and row 2
cols 4-6 (Multi-Agent Orchestration + Composable
Pipelines, both 3 cols wide)
- 9 standard cells: 3 per row in rows 3-5
- Full-width footer cell: row 6 enterprise summary
Each cell has a unique colored accent dot (no two icons alike).
Wide cells have subtle code-bracket watermarks ({} and |) bleeding
into the corner. Hover triggers a cursor-following radial spotlight
via JS-set CSS custom properties (--mx, --my) on the ::before
pseudo-element. Pointer-fine only — no spotlight on touch.
Also fixed a stale fact: "24 Built-in Tools" → "33 built-in tools"
(matches actual `grep -c '^@tool' src/selectools/toolbox/*.py`).
Added MCP card (was missing from the bento despite being shipped).
Tech: grid-auto-flow: dense + explicit grid-row/grid-column on
the two wide cells to prevent the row-2 col-6 gap that the first
iteration shipped with (caught via Playwright screenshot).
──────────────────────────────────────────────────────────────────
SECTION 3 — "Built for teams shipping agents to production"
Before: 3 identical persona cards with icon + heading + paragraph
After: 3 tilted postcards (rotations -1.2°, +0.6°, -0.4°) with:
- Display-font pull quotes (e.g., "I just want to know
what my agent did and how much it cost. On every call.")
with giant Georgia " mark in the corner
- Persona name in mono-uppercase
- Color-coded chip per persona ("in production · auto",
"SBOM · SOC 2 · HIPAA", "$0 · self-hosted")
- "You'll appreciate" footer with real code references
- Unique background pattern per card (terminal grid /
shield dot pattern / vertical cost bars), masked to
the bottom of the card via radial mask-image
CSS perspective + transform-style: preserve-3d enables a tilt-on-
hover effect that lifts each card off the page. Disabled on touch
via @media (hover: hover) and (pointer: fine).
──────────────────────────────────────────────────────────────────
SECTION 4 — "Three paths. Pick yours."
Before: 3 generic icon cards (monitor / code-brackets / book)
After: 3 cards with REAL live previews instead of abstract icons:
1. Visual Builder: animated SVG mini-graph with START →
Researcher/Writer → END nodes connected by edges. The whole
graph IS the preview. On hover, nodes glow cyan.
2. Code First: typing terminal showing a real Python REPL
session — `pip install selectools`, `>>> from selectools
import Agent`, `>>> Agent().run("hi")`, `'Hello! How can I
help?'` with blinking cyan caret. Lines fade in one at a
time when card scrolls into view (staggered transition-delays
0.1s → 1.6s).
3. Learn by Example: marquee of 18 real example filenames
across 3 rows scrolling in alternating directions
(32s/38s/36s durations). Top-and-bottom mask-image fade so
the marquee feels infinite. Each chip shows the example
number prefix + filename ("01 hello_world.py", etc.).
Each card's preview is the differentiator from a generic CTA card.
You see what each path looks like before clicking.
──────────────────────────────────────────────────────────────────
ACCESSIBILITY (prefers-reduced-motion)
All four sections have explicit reduced-motion overrides that:
- Snap any reveal animations to visible end state
- Kill the why-fix-glow keyframe
- Snap bento bar fills to their target widths instantly
- Remove persona rotations (cards sit straight)
- Snap path-term lines to visible (no typing)
- Stop the path-marquee scroll
- Remove all hover transforms
──────────────────────────────────────────────────────────────────
WHAT'S NOT IN THIS PR
- The "Code Comparison" section (line 1840) is intentionally untouched
— it already uses real code as the visual primitive (LangGraph
side-by-side selectools), which is the same direction the new
sections move toward. It's already on-brand.
- Hero, simulations, eval framework, builder, FAQ, and footer
sections are untouched — those weren't in the user's complaint set.
- No structural HTML changes outside the 4 redesigned sections.
- File grew from ~3K to ~4.5K lines (+1226 / -111). All within
the inline <style> + <script> blocks of landing/index.html.
Visual iteration evidence: section 2 first ship had a row-2 col-6
gap that I caught via Playwright screenshot and fixed by explicit
grid-row/grid-column placement on the second wide cell. Section 4
first ship had a code line wrapping out of the terminal card width
that I fixed by restructuring the REPL session into shorter lines.
Both bugs would have shipped without the screenshot iteration loop.
johnnichev
added a commit
that referenced
this pull request
Apr 7, 2026
Replaces the bullet stack + generic mac-terminal code window with a single full-width terminal panel that types its script line-by-line on viewport entry, paired with a vertical capability rail whose chips light up in sync with their trigger lines. The terminal types 14 lines over ~3s using staggered transition-delays (reuses the path-term pattern from PR #46). Each chip carries an inline --chip-delay CSS var; the JS observer reads it and stages the .is-lit class via setTimeout. The execution pointer settles as a blinking caret at the end of agent.run() once typing finishes. Capability mapping (line → chip): HybridRAG import → Hybrid RAG (0.45s) PIIGuardrail import → Guardrails (0.65s) AuditLogger import → Audit logging (0.85s) @tool() decorator → Tool calling (1.30s) Agent(...) constructor → Multi-agent graphs (1.95s) agent.run(...) → 50 evaluators (2.75s) trailing comment → Visual builder (3.10s) Mobile: stage collapses to single column, terminal min-height 340px, chips stack below. Reduced motion: terminal lines snap visible, all chips force-lit, caret static. Both fallbacks designed as intentional static compositions, not stripped animations. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 1"
johnnichev
added a commit
that referenced
this pull request
Apr 7, 2026
User reported #features bento not working on mobile. Audit found 4 mobile issues across the redesigned sections, fixed in one pass: 1. Bento (#features, from PR #46) — broken at narrow viewports. Cause: two cells use inline `style="grid-row:1;grid-column:4 / 7"` to pin them to specific positions in the 6-col desktop grid (a fix for an earlier bento gap bug). Inline styles beat media queries via specificity, so on mobile the cells try to occupy invalid positions in the 1-col grid and overflow / collapse. Fix: add !important to the existing 700px breakpoint reset for .bento__cell--{wide,full,hero} to override the inline styles. Also add a 1100px-701px intermediate fix that resets pinned wide cells to span 4 cols (full row) at tablet width. 2. Drag-to-compare (#see-difference) — too tight to read at narrow viewports because each column shrinks below ~200px and the code text gets clipped horizontally. Fix: at <=700px, override grid-template-columns to 1fr and stack the two code blocks vertically (LangGraph above, selectools below), both full-width. Hide the slider, divider, knob, side labels, and drag hint — the comparison is static on mobile. Each column grows to its content height with internal max-height + overflow-y auto. 3. Nav links — visible at <=1024px even though .hide-mobile rule exists. Cause: the .nav-links { display: flex } base rule comes later in source order than .hide-mobile { display: none } in the 1024px media query. Equal specificity (one class each), so cascade order wins for .nav-links, defeating the hide. Fix: add the higher-specificity .nav-links.hide-mobile selector inside the existing 1024px media query. Two-class specificity wins regardless of source order. 4. Copy reference to "drag the handle" no longer applies on mobile stacked layout. Reworded to "Same outcome — 25 lines of ceremony, or one." which works in both contexts. Verification: Playwright sweep at 390x844 (iPhone 12 portrait) found zero horizontal overflows on the entire page. All 12 bento cells render at uniform 358px width in a single column with no overlaps.
9 tasks
johnnichev
added a commit
that referenced
this pull request
Apr 7, 2026
* docs(landing): add overdrive fused design spec for 6-section redesign Pins the design contract for the next phase of landing overdrive work: 6 sections (What is / See the difference / Production-ready / Enterprise-ready / Built-in evaluation / FAQ) plus footer plus 3 wordmark variants. Fuses A+C: every section gets technical proof (living documentation) unified by a section-local execution-pointer device (abstract pulse, not a character). Includes per-section mobile fallbacks, prefers-reduced-motion fallbacks, build order, performance budget, and definition of done. * feat(landing): execution-pointer CSS architecture (setup) Adds the shared design tokens, keyframes, and reusable atoms that all six redesigned sections will compose. The execution pointer is a conceptual entity (cyan pulse representing live execution) implemented as section-local animations sharing common timing and color. Atoms added: - .exec-dot — pulsing status indicator (used in wordmark, headers) - .exec-caret — blinking block cursor (terminals, wordmark) - .exec-scan — one-shot horizontal beam sweep (banners, terminals) - @Keyframes exec-stamp — one-shot scale + cyan ring for exhibits Tokens: --exec-color, --exec-glow(-soft), --exec-pulse-dur, --exec-step-dur, --exec-blink-dur, --exec-ease-step, --exec-ease-soft. Reduced-motion overrides included in the existing media block. No visual changes yet — atoms have no consumers until Section 1 lands. * feat(landing): #what — terminal + capability rail Replaces the bullet stack + generic mac-terminal code window with a single full-width terminal panel that types its script line-by-line on viewport entry, paired with a vertical capability rail whose chips light up in sync with their trigger lines. The terminal types 14 lines over ~3s using staggered transition-delays (reuses the path-term pattern from PR #46). Each chip carries an inline --chip-delay CSS var; the JS observer reads it and stages the .is-lit class via setTimeout. The execution pointer settles as a blinking caret at the end of agent.run() once typing finishes. Capability mapping (line → chip): HybridRAG import → Hybrid RAG (0.45s) PIIGuardrail import → Guardrails (0.65s) AuditLogger import → Audit logging (0.85s) @tool() decorator → Tool calling (1.30s) Agent(...) constructor → Multi-agent graphs (1.95s) agent.run(...) → 50 evaluators (2.75s) trailing comment → Visual builder (3.10s) Mobile: stage collapses to single column, terminal min-height 340px, chips stack below. Reduced motion: terminal lines snap visible, all chips force-lit, caret static. Both fallbacks designed as intentional static compositions, not stripped animations. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 1" * feat(landing): #eval — live test report + 50-evaluator marquee Replaces the 3 stacked tag-cards (Deterministic / LLM-Judge / Infrastructure) with a hardcoded mock test report skeleton that fills in metrics on viewport entry, plus a full-width 2-row marquee of all 50 evaluators scrolling in opposite directions. The report: - pytest-style header bar with amber spinner during running, then green dot + "passed" status when done - 3 metric rows (accuracy / latency p50 / total cost), each with cyan/amber/green animated bar fills and tabular-num value reveals - Footer line: "1 passed in 142ms" + assertion summary Choreography: bar fills cascade at 0.2s / 0.55s / 0.9s, value reveals follow at 1.5s / 1.85s / 2.2s, status flips to "passed" at 2.7s. The marquee renders all 30 deterministic + 20 judge evaluators in two rows scrolling at 32s/38s in opposite directions. Edges masked with linear-gradient for clean fade-in/out. Tags duplicated inline for seamless loop. Code window on the left preserved as-is. Iframe report+trace previews below the new stage preserved as-is — they're real proof and the user only flagged the chip-card layout. Mobile: stage stacks single-column, marquee tags shrink. Reduced motion: report snaps to done state, marquee freezes mid-scroll. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 5" * feat(landing): #production — interactive trace explorer Replaces the 4 stacked result.* cards with a clickable agent loop: 4 nodes (llm_call → tool_selection → tool_execution → llm_call) above a single result panel that swaps content based on the active node. Each node represents a step the agent took; clicking it inspects what that step produced (reasoning text, tool call, tool output, final content) along with step metadata (tokens, cost, guardrail status). Section gets id="production" so deep links work. Choreography: - IntersectionObserver fires auto-play through nodes 1→2→3→4 at 850ms intervals on viewport entry (one-shot, observer disconnects after) - After auto-play, the panel idles on the final node - User can click any node anytime to inspect that step - Keyboard nav: ArrowLeft/ArrowRight between nodes (proper tablist semantics with role="tab"/aria-selected) The 4 panel states are pre-rendered in the markup and toggled via .is-active. Active node gets the cyan ring + glow from the exec-stamp language. Arrows past the active step turn cyan (visited). Mobile: nodes stack vertically, arrows hide. Reduced motion: state fade-in animation killed, panel still swaps on click. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 3" * feat(landing): #see-difference — drag-to-compare slider Replaces side-by-side LangGraph/selectools code blocks + green checkmark list with a drag-to-compare slider. Both code blocks live in the same container, stacked. The selectools (foreground) layer is clipped via clip-path inset tied to a --split CSS variable. A range input (visually hidden but native, gives free touch + keyboard support) drives --split on input. A glowing cyan split line + circular knob render the handle. The 4 old checkmarks become numbered annotations below the pane that fade in as the slider passes their thresholds (20% / 40% / 60% / 80%). Choreography: on viewport entry, an IntersectionObserver fires a one-shot auto-sweep — 50 → 95 → 50 over ~2.4s using requestAnimationFrame with cubic easing. The annotations cascade in as the slider passes each threshold, then stay shown after the sweep returns. After the sweep completes, the slider sits at 50 awaiting user drag. The selectools foreground extends past the original 1-line example into 6 comment lines that double as inline copy ("That's it. No StateGraph. No TypedDict. No add_node, no add_edge..."). The pane is 480px tall so both languages have room to breathe at any split. Section gets id="see-difference" for deep linking. Touch: <input type="range"> handles touch natively; the knob is 48px on mobile for thumb reach. Reduced motion: clip-path transition killed, all annotations force-shown, slider is fully usable as static comparison. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 2" * feat(landing): #enterprise — compliance shelf (extracted from bento) Removes the sad full-width pill row that lived as bento__cell--full inside #features. Replaces it with a standalone #enterprise section between #features and #eval, containing 5 distinct micro-components laid out as exhibits in a 5-column grid: 1. Coverage ring — animated SVG circular gauge climbing to 95% 2. Test counter — large number ticking from 0 → 4612 with cubic ease 3. Version stack — 5 rungs (3.13 → 3.9) lighting up sequentially 4. CycloneDX SBOM — paper-document card with folded corner + barcode 5. Stability card — @stable / @beta / @deprecated marker rows Each exhibit fades in on viewport entry with a stamp effect (the exec-stamp keyframe from the setup commit) staggered ~130ms apart. The counter ticks via requestAnimationFrame with an easeOutCubic curve starting after the initial stamp completes. Section gets id="enterprise" for deep linking. Mobile: 5-col → 2-col at 1080px → 1-col at 600px. Reduced motion: exhibits snap visible, ring snaps to 95%, version stack lights all rungs, counter shows final value (no tick animation). All fallbacks designed as intentional static compositions. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 4" * feat(landing): #faq — selectools docs REPL Replaces the basic stacked accordion with a search-driven docs REPL: - Left rail: 5 category tabs (all / getting-started / concepts / providers / advanced) with question counts as pill badges - Top bar: prompt-styled search input ("docs >") with cyan caret - Main panel: 10 questions render as ? prompts in JetBrains Mono. Click to expand the answer in the same monospace style with inline syntax-highlighted code blocks. Active question gets a cyan glow strip on the left. The 10 questions and their full answers are preserved from the old accordion (zero copy regression). Each question is tagged with both data-cat (for category filter) and data-q (extra search keywords beyond the visible text — e.g. "langchain" returns the comparison Q). Behaviors: - Click a category tab → filters question list (with empty state) - Type in search → filters by text + keyword tag, instant - Categories and search compose (intersect) Hero moment: on viewport entry, the pointer auto-types "production" into the search bar character-by-character (95ms each), filters down to the production-readiness question, then clears the input after 1.4s so the user lands on a clean searchable list. The auto-type only fires once per page load. Mobile: rail collapses to a horizontal scroll of category chips above the panel. Question category labels hidden. Answer indent reduced. Reduced motion: answer fade-in killed, auto-type seed still runs but without the smooth fade. Categories and search work identically. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 6" * feat(landing): footer — terminal sitemap Replaces the basic footer (NichevLabs attribution + 4 link row) with a terminal sitemap rendered as \`\$ tree selectools.dev/\` output. Each path in the tree is a hover-highlighted link with a cyan glow on hover. Comments after the paths describe what each section is. Layout: \$ tree selectools.dev/ # site map . ├── docs/ │ ├── quickstart.md │ ├── configuration.md │ ├── providers.md │ └── api-reference/ ├── examples/ # 88 numbered scripts ├── builder/ # visual flow editor ├── github/ # source · issues · discussions ├── pypi/ # pip install selectools └── changelog/ # what shipped, what changed # selectools v0.20.1 · Apache-2.0 · made by NichevLabs # for developers who ship \$ ▌ The trailing \`\$ ▌\` has the exec-caret atom (blinking block cursor) that never stops — the page is "still running". Comments are styled in italic dim text per terminal convention. Mobile: smaller font (11.5px), tighter padding. Reduced motion: caret static via the global atom override. Box-drawing characters wrap gracefully via overflow-x: auto on the tree container. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Footer" * feat(landing): wordmarks — 3 switchable variants + favicons Three wordmark variants live in the nav-logo slot, switchable via ?logo=1|2|3 URL param. Selection is persisted to localStorage. A small head-script reads the param BEFORE paint and sets html[data-logo] to avoid FOUC. CSS shows only the active variant via [data-logo="N"] .wm--N { display: inline-flex }. Variant 1 — [•] selectools (default) Pulsing cyan dot inside square brackets followed by the wordmark. Brackets read as "select"; the dot is the execution pointer atom (.exec-dot, defined in the setup commit). Reduces cleanly to a 16x16 favicon as landing/favicon.svg with an animated SVG dot. Variant 2 — s▌electools Block cursor (.exec-caret atom) inserted between the s and the rest of the wordmark. The caret blinks via the global exec-blink keyframe. Companion favicon: landing/favicon-cursor.svg (a vertical block cursor). Variant 3 — terminal banner art (3-row box-drawing) Compact 3-row box-drawing rendering of "selectools" set in JetBrains Mono at ~6.5px on desktop / 5.5px mobile. Cyan with a soft drop-shadow glow. Unmistakably terminal-coded; nobody else does this on a Python framework landing page. Uses .wm--3__banner with a <pre> for whitespace preservation. Companion favicon: same as Variant 2 (cursor). All three variants: - Render inside <a class="nav-logo"> with a visually-hidden <span>selectools</span> for screen readers (aria-hidden on every variant for the visuals) - Existing nav-logo "wink" hover transform applies to all three uniformly - Reduced motion: caret blink killed (Variant 2), banner mask animation killed (Variant 3), pulse killed via the global atom override Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Wordmark" * fix(landing): audit fixes from cross-section verification pass Three bugs caught by Playwright visual audit: 1. FAQ rail was being hoisted to the top of the page. Cause: <nav class="repl__rail"> matched the existing global `nav { position: fixed; top: 0 }` site nav selector, escaping its grid container and pinning to the page top. Fix: switch to <div role="navigation"> — same a11y semantics, no inheritance from the global nav rule. 2. Drag-to-compare slider showed only one half (clip-path bug). Cause: clip-path: inset(0 calc(100% - var(--split)) 0 0) does not recompute in browsers when var(--split) changes — the parsed value is frozen at element creation. Even setting clip-path inline via JS didn't help because the existing global .code-body has its own mask-image and overflow rules that interacted badly with the absolute-positioned layered approach. Fix: rewrite as a CSS Grid 2-column layout where the column widths are driven by --split (a unitless 0..100 value, multiplied by 1% in calc()). Both code blocks live in their own columns, side by side. Slider drag resizes the columns. No more clip-path. Drag left = wipe LangGraph away (less LangGraph col, more selectools). 3. Eval report status badge stayed on "running" text after the green "passed" color flip. Polish: JS now updates the badge textContent to "passed" when the .is-done class is added at 2700ms. Spec ref: docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md §"Section 2", §"Section 5", §"Section 6" * fix(landing): mobile adapt — bento, see-difference, nav links, copy User reported #features bento not working on mobile. Audit found 4 mobile issues across the redesigned sections, fixed in one pass: 1. Bento (#features, from PR #46) — broken at narrow viewports. Cause: two cells use inline `style="grid-row:1;grid-column:4 / 7"` to pin them to specific positions in the 6-col desktop grid (a fix for an earlier bento gap bug). Inline styles beat media queries via specificity, so on mobile the cells try to occupy invalid positions in the 1-col grid and overflow / collapse. Fix: add !important to the existing 700px breakpoint reset for .bento__cell--{wide,full,hero} to override the inline styles. Also add a 1100px-701px intermediate fix that resets pinned wide cells to span 4 cols (full row) at tablet width. 2. Drag-to-compare (#see-difference) — too tight to read at narrow viewports because each column shrinks below ~200px and the code text gets clipped horizontally. Fix: at <=700px, override grid-template-columns to 1fr and stack the two code blocks vertically (LangGraph above, selectools below), both full-width. Hide the slider, divider, knob, side labels, and drag hint — the comparison is static on mobile. Each column grows to its content height with internal max-height + overflow-y auto. 3. Nav links — visible at <=1024px even though .hide-mobile rule exists. Cause: the .nav-links { display: flex } base rule comes later in source order than .hide-mobile { display: none } in the 1024px media query. Equal specificity (one class each), so cascade order wins for .nav-links, defeating the hide. Fix: add the higher-specificity .nav-links.hide-mobile selector inside the existing 1024px media query. Two-class specificity wins regardless of source order. 4. Copy reference to "drag the handle" no longer applies on mobile stacked layout. Reworded to "Same outcome — 25 lines of ceremony, or one." which works in both contexts. Verification: Playwright sweep at 390x844 (iPhone 12 portrait) found zero horizontal overflows on the entire page. All 12 bento cells render at uniform 358px width in a single column with no overlaps.
johnnichev
added a commit
that referenced
this pull request
Apr 7, 2026
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.
12 tasks
johnnichev
added a commit
that referenced
this pull request
Apr 7, 2026
) * fix(landing): five small polish items 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.) * feat(landing,docs): cards overdrive + Variant 3 logo in README and docs 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. * feat(landing): comparison table polish + OG image + Variant 3 nav centering 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.
⚡ Overdrive
The 4 templated icon-card sections you flagged as AI slop are gone. Each one is now its own visual genre instead of a content variant of the same template.
Skills invoked
Per your request to "make this unforgettable" — applied /bolder + /animate + /delight + /overdrive simultaneously, guided by the existing .impeccable.md design context and /frontend-design anti-pattern catalog.
Per /overdrive's mandatory protocol, I presented 3 directions and you picked Direction A — Canvas-of-Truth. This PR is the implementation of that direction.
What changed in detail
Section 1 — "Three problems every agent team hits"
Replaced the 3-card grid with 3 vertically-stacked diff vignettes. Each vignette has:
Real content, not abstract:
?? which tool ran,?? what model callednext to selectools'result.traceshowing structured llm_call/tool_select/tool_exec/llm_call timeline"my ssn is 123-45-6789"next to selectools'[REDACTED]output$2,847.10for OpenAI next toresult.usage.total_cost = $0.00184Scroll-triggered IntersectionObserver fades each vignette up at threshold 0.25 with rootMargin -10% bottom. The "fix" panel gets a one-shot cyan glow keyframe at +0.4s.
Section 2 — "One install. Everything built in."
Replaced the 4×2 + 2×2 card grid with a 6-column asymmetric bento mosaic. The "50 Evaluators" hero cell occupies cols 1-3 rows 1-2 and contains a real animated bar chart (Deterministic 30 / LLM-as-judge 20 / Coverage tests 95) that fills from 0% via the
.in-viewIntersectionObserver trigger. Two wide cells are explicitly pinned to row 1 cols 4-6 (Multi-Agent Orchestration) and row 2 cols 4-6 (Composable Pipelines) — this prevents the row-2 col-6 gap that the first iteration had.Each cell has a unique colored accent dot (cyan/red/green/purple/amber/blue) instead of an icon-square. Wide cells have subtle code-bracket watermarks (
{ }and|) bleeding into the corner. On hover, a cursor-following radial gradient spotlight tracks the mouse via JS-set CSS custom properties.12 cells total: 1 hero, 2 wide, 8 standard (3 per row × 2 rows + 2 + 1), 1 full-width footer. Also fixed a stale fact: "24 Built-in Tools" → "33 built-in tools" (verified via
grep -c '^@tool' src/selectools/toolbox/*.py). Added a Model Context Protocol cell that was missing despite MCP being shipped.Section 3 — "Built for teams shipping agents to production"
Replaced 3 identical persona cards with 3 tilted postcards. Each has:
"mark in the cornerresult.trace,AuditLogger,PIIGuardrail)CSS perspective + transform-style: preserve-3d enables a tilt-on-hover effect where cards lift and rotate to face the viewer. Disabled via
@media (hover: hover) and (pointer: fine)so touch devices don't get sticky hover.Section 4 — "Three paths. Pick yours."
Replaced 3 generic icon-cards with 3 live preview cards. Each card has a
path__previewarea with a real interactive demonstration of what that path looks like:1. Visual Builder — Animated SVG mini-graph showing START → Researcher/Writer → END as four nodes connected by edges. On card hover, all nodes glow cyan with drop-shadow filter. The graph IS the preview.
2. Code First — Typing terminal showing a real Python REPL session:
Lines fade in one at a time (staggered transition-delays 0.1s → 1.6s) when the card scrolls into view via IntersectionObserver. Blinking cyan caret on the last line.
3. Learn by Example — Marquee of 18 real example filenames across 3 rows scrolling in alternating directions (32s/38s/36s durations). Top-and-bottom mask-image fade so the marquee feels infinite. Each chip shows the example number prefix + filename ("01 hello_world.py", "14 rag_basic.py", etc.).
Visual iteration loop (per /overdrive protocol)
I used Playwright to load the live site, take baseline screenshots of all 4 sections, then iterate after each section. Two bugs were caught and fixed by visual iteration that pure code review would have missed:
Bento row-2 col-6 gap — first iteration of Section 2 left a visible 1-cell-wide hole on row 2 because guardrails (2 cols) couldn't fill the 3-col gap left by the wide orchestration cell. Fixed by explicit
grid-row:2;grid-column:4/7placement on the second wide cell.Code line wrapping in Path 2 terminal — first iteration of Section 4 used a Python one-liner that wrapped awkwardly inside the 220px-tall terminal preview. Fixed by restructuring as a proper REPL session with shorter lines.
Both fixes were one-line changes once I could see the problem. Neither bug would have been visible from reading the CSS.
Accessibility (prefers-reduced-motion)
All four sections have explicit reduced-motion overrides that:
Test plan
Desktop:
result.trace,pip install selectools, etc.)Mobile (Galaxy S23):
@media (max-width: 700px)Accessibility:
What's NOT in this PR
<style>and<script>blocks oflanding/index.html. No new files.The /overdrive removal test
Take any of the 4 redesigned sections away and the page is diminished. They each carry their section's content in a way the icon-card grid never could:
The wow test: each section now has a moment that asks "wait, how did they do that?" — the bar chart filling, the typing terminal, the marquee, the diff glow. None of them are gratuitous; each one carries meaning.
If anything looks off after merge, I'll iterate on the same branch.