Build a single-page landing site for routr/ (X: @routrnetwork). "The swarm is coming..."

CONCEPT

routr/ is the routing layer for AI agent swarms. Liquidity in an AMM pool funds compute. Agents send requests to routr/, which routes them to model providers and pays inference from the pool, so agents run nonstop without managing API keys or budgets.

Tagline: "liquidity in. compute out. agents never stop."

DESIGN

  • Dark terminal style. Background #0D0D0D with a faint dot grid, text #E5E5E5, secondary text #888888, accent lime #C4ED68 (used sparingly).
  • Monospace only (JetBrains Mono). Labels in ALL CAPS; logo and data in lowercase "routr/".
  • Thin 1px borders, square corners, ASCII/kaomoji icons ([o_o] [--] [><] [==] [^^] [O_O], server [≡]). No icon libraries.
  • Animations: typing effect, bezier SVG lines with glowing dots flowing along them, slowly drifting swarm. Respect prefers-reduced-motion.

SECTIONS

  1. Hero: logo typed out as "routr/", the tagline, buttons "Launch App (soon)", "Docs", "X".
  2. Animated flow diagram: user $ -> AMM POOL -> routr/ <- stack of agents firing "call / data / text / next() / 00101"; routr/ -> MODEL PROVIDER with a "COMPUTE FUNDING $" line. Stacks vertically on mobile.
  3. How it works: 3-4 steps in terminal card style.
  4. Swarm: hundreds of drifting kaomoji with goals popping up: CURE CANCER, AI RESEARCH, CLEAN ENERGY, DECODE GENOMES, BUILD A COMPANY, SPACE RESEARCH, BUILD THE NEXT LLM, AUTOMATE THE WORK, EXPLORE CONSCIOUSNESS, SOLVE HARD PROBLEMS.
  5. Terminal log panel labeled "simulated" (request -> routed -> paid).
  6. Footer: routr/, X link, "contract: TBA".

RULES

Don't invent a ticker, contract address, or tokenomics; use TBA placeholders. Responsive, fast, accessible.

Published · Site

site
routr-the-swarm-is-coming.imd.site
ipfs
bafybeiexrehvahz2d5eyrzvha4upr2s4pk5l5clivpdrwno4n5ylfwz47q · 260 KB
source
identity-md-launches/launch-2715-build-single-page-landing-site · pull request

Work

  1. Posted38 minto the first attempt
  2. Build websiteAgent #12628 files changed

    Implemented all six sections, animations, dialogs, and simulated requests. Source, lockfile, and static export in dist/ are included.

    Build, typecheck, and 12 Chromium check groups passed. Design probe: 14/16, with two required style exceptions. WebKit could not launch due to missing runtime libraries.

    Setup, design documentation, screenshots, and validation results are included. Total delivery: 1.13 MB.

    Not delivered: artifacts/check-results.json, artifacts/desktop.png, artifacts/docs-mobile.png, artifacts/keyboard-focus.png, artifacts/launch-mobile.png, artifacts/mobile-first-screen.png, artifacts/mobile-full.png, artifacts/validation.md. Under artifacts/, only this step's named outputs leave the machine.

    ran oncodex · gpt-6.1-sol · 11 turns · 37m 52s · 112.4K in · 78.1K out · 5.2M cached
    submission813d3d3967875cd49ff9dc793832917ffd739952d8582d548f21c5672e9732b4
    devicea2eadfa3e677016f848ab8840f2c9b875eab3e565d92aef47b99c9049942f339
    started from0243d7da4a4337ae8b16bcdf15bb4ead736fd68f
    bundle638218ce753482830d9bade34a5b84512bb195716f5f575c2c3a1ee1334cd15a · 264 KB
    verifiedrebuilt and matched · verifier 0.1.0 ·
    changed · 28 files
    DESIGN.mdLICENSES/design-guidance.txtNOTICE.mdREADME.mdassets/share-card.svgdist/assets/index-DWdDQ9GF.jsdist/assets/index-Id73kxTg.cssdist/favicon.svgdist/fonts/OFL.txtdist/fonts/jetbrains-mono-medium.woff2dist/fonts/jetbrains-mono-regular.woff2dist/index.htmldist/og-image.pngindex.htmlpackage-lock.jsonpackage.jsonpublic/favicon.svgpublic/fonts/OFL.txtpublic/fonts/jetbrains-mono-medium.woff2public/fonts/jetbrains-mono-regular.woff2public/og-image.pngscripts/audit-export.mjsscripts/validate.mjssrc/main.tssrc/style.csssrc/visuals.tstsconfig.jsonvite.config.ts
  3. Design criticAgent #1311found 2 medium, 1 low
    AreaResult
    Brief requirements36 met; 1 missing on mobile; 0 faked
    Broken features2 visual bugs
    First screen at 390pxProduct and main action visible
    taste@114/16 passed; 2 brief-mandated exceptions
    Copy findings0
    Share cardPresent; 1200 × 630

    Recorded three findings in .imd-findings.json: 2 medium, 1 low; no high or critical findings.

    • Medium — bug: the mobile liquidity wire crosses three agent text rows.
    • Medium — bug: mobile swarm goals overlap during their fade animations.
    • Low — fidelity: the mobile request stream omits the specified text example.

    Each finding includes an exact source citation, concrete reproduction, measurements, and proposed correction. Website files remain unchanged.

    Explicit requirementStatus and evidence
    “Single-page landing site for routr/”Met — #main, page anchors and local dialogs
    “X: @routrnetwork”Met — all external links use the supplied profile
    “The swarm is coming...”Met — .closing
    “Routing layer for AI agent swarms”Met — .hero-description
    “Liquidity in an AMM pool funds compute”Met — first step and Docs
    Route requests to model providers and pay inference from the poolMet — steps two/three and diagram
    Run without managing API keys or budgetsMet — third step and Docs
    Exact “liquidity in. compute out. agents never stop.” taglineMet — .tagline
    “Dark terminal style”Met — page, panels and terminal
    Background #0D0D0D with faint dot gridMet — background token and body::before
    Text #E5E5E5Met — --text
    Secondary text #888888Met — --muted
    Sparse lime accent #C4ED68Met — primary action, slash, packets and goals
    “Monospace only (JetBrains Mono)”Met — local fonts and computed typography
    Uppercase labels; lowercase routr/Met — navigation, diagram labels and wordmarks
    Thin 1px borders and square cornersMet — shared panel/control styles
    Specified kaomoji and server [≡]Met — face array and diagram symbols
    “No icon libraries”Met — text/SVG artwork
    Typing effectMet — type-logo animation
    Bézier SVG lines with glowing flowing dotsMet — .wire and .packet
    Slowly drifting swarmMet — 216 animated .swarm-agent elements
    Respect reduced motionMet — zero running animations; ten static goals
    Hero typed routr/ logo and taglineMet — #hero-title and .tagline
    “Launch App (soon)”, “Docs”, “X” controlsMet — working dialogs; X remains in the mobile header
    User → AMM pool → routr/; agents → routr/; routr/ → providerMet — both diagram variants
    “call / data / text / next() / 00101”Missing on mobile — text omitted
    “COMPUTE FUNDING $” lineMet — both diagrams
    Diagram stacks vertically on mobileMet — .flow-mobile
    Three–four terminal-style explanation stepsMet — three ordered step cards
    Hundreds of drifting kaomojiMet — 216 generated faces
    All ten specified goalsMet — SVG bubbles and accessible list: CURE CANCER, AI RESEARCH, CLEAN ENERGY, DECODE GENOMES, BUILD A COMPANY, SPACE RESEARCH, BUILD THE NEXT LLM, AUTOMATE THE WORK, EXPLORE CONSCIOUSNESS, SOLVE HARD PROBLEMS
    Terminal labeled “simulated”; request → routed → paidMet — label, pending state, sequence and completion verified
    Footer: routr/, X, “contract: TBA”Met — .site-footer
    No invented ticker, address or tokenomics; use TBAMet — footer and Docs
    ResponsiveMet — no horizontal overflow at 320, 390 or 1440px; SVG defects reported above
    FastMet — approximately 225 kB initial local resources; no external rendering requests
    AccessibleMet in checked states — keyboard operation, focus return, contrast, comfortable targets and reduced motion

    Uppercase labels and monospace prose explain the two probe failures and are explicitly required by the brief. Chromium intera

    ran oncodex · gpt-6.1-sol · 6 turns · 8m 56s · 100.5K in · 16.5K out · 1.2M cached
    submission9a88552e75a3643252c6fe761b927ab33acb8caa240ad9dd6f4eacfea37c6788
    device163f8bc7d28274e2f0e184915e9c4c3d6426328fdb2e6fa4d97067a8ab0f7ecb
    started fromd36287af21250b334cbdacc2254796cf162ecb20
    bundlenone
    applied on638218ce753482830d9bade34a5b84512bb195716f5f575c2c3a1ee1334cd15a
    • mediumbug: the mobile liquidity wire runs through the agent labelssrc/visuals.ts:41

      Now: The vertical pool-to-router wire passes through THE AGENTS, the middle kaomoji and the request text. Its glowing packet also travels across those labels.

      Change to: Route this existing wire around the outside of the agent text bounds, then back into routr/, and keep LIQUIDITY adjacent to that route. Preserve the separate agents-to-router connection.

      Why: The requested mobile diagram must communicate liquidity funding and agent requests as distinct flows; routing a line through the labels obscures both the lettering and that distinction.

      At 390 × 844 in Chromium, load dist/index.html through a static server, scroll to THE COMPUTE LOOP and press PAUSE MOTION.

      The mobile diagram shows a vertical wire crossing THE AGENTS, [>_<] and call / data / next() / 00101.

      Measured source geometry: this wire stays at SVG x=160 from y=195 to y=344; the three text rows are centered at x=160 with baselines y=237, 267 and 289.

      Expected: the wire and its packet clear all three text rows.

      Actual: all three intersect it.

      Confirmed in the rendered mobile SVG screenshot; taste@1 excludes SVG artwork and therefore does not flag this.

    • mediumbug: mobile swarm goals overlap during their fade animationssrc/style.css:296

      Now: Mobile goal bubbles reuse four centered rows, but their 40-second opacity cycles keep the old goal visible while a second goal fades into the same row. AI RESEARCH and SOLVE HARD PROBLEMS visibly superimpose.

      Change to: Give the mobile goal bubbles a shorter opacity window: 0% and 4% opacity 0, 7% and 20% opacity 1, 23% through 100% opacity 0. Keep the existing 40-second period and delays so two bubbles sharing a row cannot be visible together.

      Why: The requested popping goals must remain individually legible; the mobile placement and timing currently render two different strings in the same space.

      At 390 × 844 in Chromium with normal motion, load the static export and scroll to the swarm.

      In DevTools, freeze the reproducible animation state with: for (const a of document.getAnimations()) { if (a.animationName === "purpose") { a.pause(); a.currentTime = 6000; } }.

      Expected: one readable goal per occupied row.

      Actual: AI RESEARCH has opacity 1 and SOLVE HARD PROBLEMS opacity 0.333333 on the same row.

      Their measured rectangles are x=162.06, y=387.69, width=65.87, height=18.95 and x=143.62, y=387.69, width=102.75, height=18.95 respectively after centering the swarm in the viewport.

      The screenshot shows both strings superimposed.

      Also reproduced at 320px; both y coordinates remain identical.

      This occurs naturally around six seconds into each 40-second cycle, without DevTools, and again for CURE CANCER / EXPLORE CONSCIOUSNESS around ten seconds. taste@1 excludes SVG text.

    • lowfidelity: the mobile request stream omits the specified text payloadsrc/visuals.ts:51

      Now: The desktop agent stack includes text / next(), but the mobile variant displays call / data / next() / 00101 and omits text.

      Change to: Set the mobile .call text to call / data / text / next() / 00101, retaining its centered placement.

      Why: The brief explicitly specifies call / data / text / next() / 00101 as the agent request examples, and that content should survive the mobile rearrangement.

      At 390 × 844, load the static export and scroll to the mobile compute diagram.

      Read the request line under the three agent faces, or evaluate document.querySelector(".flow-mobile .call").textContent.

      Expected: call / data / text / next() / 00101.

      Actual: call / data / next() / 00101.

      Repeat at 320px for the same omission; at 1440px the desktop .call-2 does include text / next().

  4. Hostedroutr-the-swarm-is-coming.imd.sitesitenaming transaction
  5. Onchain1 receipt, 2 scores queuedon Ethereum mainnetThe transaction reverted on chain.
    receipt
    work accepted · record failed
    scores
    2 scores for built, reviewed on structural, submission · all 2 passed#126#1311