feat(landing): overdrive 6 sections + footer + 3 wordmark variants#47
Merged
johnnichev merged 12 commits intomainfrom Apr 7, 2026
Merged
feat(landing): overdrive 6 sections + footer + 3 wordmark variants#47johnnichev merged 12 commits intomainfrom
johnnichev merged 12 commits intomainfrom
Conversation
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.
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.
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"
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"
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"
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"
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"
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"
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"
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"
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"
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.
5 tasks
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.
Summary
Replaces 6 templated landing-page sections, the footer, and the wordmark with distinct visual treatments unified by a section-local "execution pointer" device. This is a continuation of the overdrive work from #46 (which redesigned the other 4 sections).
The design contract is pinned in
docs/superpowers/specs/2026-04-07-landing-overdrive-fused-design.md(commitd42ecfe).What changed
#what#see-difference#productionresult.*cardsllm_call → tool_selection → tool_execution → llm_call) above a single result panel that swaps content; auto-plays through nodes once on viewport entry#enterprise#eval#faqselectools docsREPL — search bar with prompt, left-rail category tabs, questions as?prompts, click to expand answers with inline syntax-highlighted code$ tree selectools.dev/output with hover-highlighted paths and a never-stopping caret?logo=1|2|3(persisted to localStorage):[•] selectools(default, with favicon),s▌electools(cursor inside the word), and a 3-row terminal banner art versionThe animating principle
Every redesigned section composes the same shared CSS atoms (
.exec-dot,.exec-caret,.exec-scan,@keyframes exec-stamp) defined in commit89c9a8c. There's no global moving DOM node — each section owns its ownIntersectionObserver-triggered animation. The cohesion comes from sharing the visual vocabulary (cyan#22d3ee, eased curves, timing language), not from runtime coordination.Mobile adapt
Verified at 360x760 (Galaxy S23), 390x844 (iPhone 12), 768 (tablet), 1024 (small desktop), 1280 (desktop).
Notable mobile fixes in
508eceb:#featuresfrom feat(landing): overdrive 4 sections — 4 distinct visual genres #46) — inline-style cell pinning beat media queries via specificity. Added!importantoverrides at the 700px breakpoint plus an intermediate 1100px-701px reset.#see-difference) — at <=700px, replaced with a stacked 2-row layout (LangGraph above, selectools below), both full-width. Slider/divider/knob hidden..nav-links(defined later in source) was beating.hide-mobileeven at <=1024px. Added higher-specificity.nav-links.hide-mobileselector to the existing media query.Final overflow audit at 390px: zero horizontal overflows across the entire page.
Reduced motion (WCAG AA)
Every animation has a designed static fallback under
prefers-reduced-motion: reduce. Each fallback is an intentional final-state composition, not a stripped animation. All 6 redesigned sections plus the footer have explicit overrides in the existing reduced-motion media block.Performance
landing/index.html(~209KB → ~286KB), well within budgetTest plan
?logo=1:[•] selectoolsrenders with pulsing dot, favicon loads?logo=2: cursor blinks betweensandelectools?logo=3: 3-row terminal banner renders with cyan glow