From 248f21e4fb8779b5c5a7817922e1a9fd1e6ada97 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 21 Sep 2026 17:42:13 +0000 Subject: [PATCH] feat(website): fit the hero to one screen and animate how a call reaches the app MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hero filled an arbitrary amount of the page and said what Appduct does without showing it. It now sizes itself to the first viewport — 100svh less the nav and the content panel's padding — with the copy on the left, a diagram on the right, and the install line on a rule at the bottom of the fold. The diagram runs an eight-second loop of three beats. In each one a source (a test run, a terminal, an agent) sends one call along its wire, the dot passes under the appduct service box and into the app, the app reacts — signs a user in, fills a cart, opens checkout — and then returns to its resting state so the next source can take a turn. The phone lists the three registered tools and lights the one being called, which is the part worth seeing: nothing outside that list is reachable. The dot travels at a constant speed, so the two outer sources simply take longer to arrive. Everything live is the theme accent, and the diagram carries solid equivalents of the theme's alpha hairlines because the dot relies on the boxes being opaque to hide behind them. Under prefers-reduced- motion it renders one landed call and nothing moves; below 50rem the scene is hidden, since at that scale its mono labels fall under 6px. The landing page's own install line is gone, now that the hero rail carries it. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Xa9xqNnaSWwsVEitpGKPWu --- website/src/components/Hero.astro | 615 ++++++++++++++++++++++++++++-- website/src/pages/index.astro | 19 +- 2 files changed, 593 insertions(+), 41 deletions(-) diff --git a/website/src/components/Hero.astro b/website/src/components/Hero.astro index eee37a7..481e882 100644 --- a/website/src/components/Hero.astro +++ b/website/src/components/Hero.astro @@ -1,6 +1,11 @@ --- // Splash-page hero in the keynote "cover" style: mono eyebrow, a big light two-beat headline, -// a short lede, and square CTAs. `hero.title` may carry an for the accented second beat. +// a short lede, square CTAs — and, beside them, a diagram of a call travelling from a caller +// through the appduct service into a running app. `hero.title` may carry an for the +// accented second beat. +// +// The hero is sized to the first viewport: the nav height and the content panel's own padding +// come off 100svh, so the rail at the bottom lands just above the fold. import { Icon } from '@astrojs/starlight/components'; const { hero } = Astro.locals.starlightRoute.entry.data; @@ -8,35 +13,211 @@ const { title = '', tagline, actions = [] } = hero ?? {}; ---
-

Open source · React Native · iOS · Android

-

- {tagline &&

} - { - actions.length > 0 && ( -

- {actions.map(({ text, link, variant, icon, attrs }) => ( - - {text} - {icon?.type === 'icon' && } - - ))} -
- ) - } +
+
+

Open source · React Native · iOS · Android

+

+ {tagline &&

} + { + actions.length > 0 && ( +

+ {actions.map(({ text, link, variant, icon, attrs }) => ( + + {text} + {icon?.type === 'icon' && } + + ))} +
+ ) + } +

+ + +
+ + How Appduct works + + A test run, a terminal and an agent each call a function registered inside a running + React Native app — login, seed_cart and open_screen — through the appduct service. The + app reacts to each call. Only the three registered tools are reachable. + + + + + + Test run + checkout.test.ts + login("u_42") + + + + Terminal + appduct invoke + seed_cart({'{items:3}'}) + + + + Agent + claude code · mcp + + open_screen("checkout") + + + + + + + + + + + + + + + + + + + + + + + appduct + service + + + + + + + + Cart + guest + + u_42 · signed in + + + 0 + + + + Nothing in the cart + + + + + Runner Low + $120 + + + + Cotton Tee + $32 + + + + Field Cap + $24 + + + + + Total + $176.00 + + Pay now + + + + + Appduct · 3 tools + + + login + + + + seed_cart + + + + open_screen + + + +
+
+ +

+ npm install -g appduct + +

+ + diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index fc764fc..1921b7d 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -93,10 +93,6 @@ const platforms = [ hasSidebar={false} >
-

- npm install -g appduct -

-

Why you’d want this

@@ -233,20 +229,13 @@ const platforms = [ font-size: 0.875em; } - .install { - margin: 2.5rem 0 0; - font-family: var(--cs-font-mono); - font-size: 0.875rem; - color: var(--cs-muted); - } - .install .prompt { - color: var(--cs-accent); - margin-inline-end: 0.5rem; - } - .section { margin-top: clamp(5rem, 10vw, 9rem); } + /* The hero already closes on its own rule, so the first section sets its own rhythm. */ + .section:first-child { + margin-top: clamp(4rem, 8vw, 7rem); + } .section .cs-eyebrow { margin-bottom: 1.25rem; }