feat(website): fit the hero to one screen and animate how a call reaches the app - #80
Merged
Merged
Conversation
…hes the app 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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Xa9xqNnaSWwsVEitpGKPWu
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
2 participants
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.
The hero filled an arbitrary amount of the page and told you what Appduct does without showing it. It now fits the first viewport and carries a diagram of a call travelling into a running app.
Layout
min-height: calc(100svh - var(--sl-nav-height) - 3rem)— the nav plus the content panel's own padding — with the copy on the left, the diagram on the right, and the install line on a rule at the bottom of the fold. The landing page's own install paragraph is gone, since the hero rail now carries it.The diagram
One inline SVG on a fixed viewBox, driven by a small
requestAnimationFrametimeline: an eight-second loop of three beats, each 2.65s.Per beat, one source sends one call —
login("u_42")from a test run,seed_cart({items:3})from the terminal,open_screen("checkout")from an agent. The call text appears in that source's box, a dot runs its wire, passes under theappductservice box and into the app, and the app reacts: signs the user in, fills the cart and its badge, or switches to a checkout screen. Then the app returns to its resting state and the next source takes a turn.The phone lists the three registered tools and lights the one being called. That is the part worth seeing — nothing outside that list is reachable.
Details worth knowing while reviewing:
pathLength / SPEED, so the two outer sources (whose wires are ~70% longer) take proportionally longer instead of racing.--d-line,--d-wash, …) of the theme's alpha hairlines rather than using--cs-linedirectly — an alpha fill would let the dot show through. The solids match the theme values exactly over the page background, andtheme.cssis untouched.--cs-accent, which differs per theme (#8232fflight,#b789ffdark) so the signal reads at the same weight on white and on black.prefers-reduced-motionrenders a single landed call as a still frame; nothing moves and no rAF loop starts.role="img"with a<title>/<desc>describing the whole exchange, so the animation is not the only way to get the point.Verification
pnpm build(17 pages, link validation passing) andpnpm typecheck(astro check, 0 errors) both clean. Checked the built site in a browser at 1440, 1280 and 390 wide, in light and dark, with no console errors.Design was prototyped and reviewed before implementation; this PR is that prototype ported into
Hero.astro.🤖 Generated with Claude Code
https://claude.ai/code/session_01Xa9xqNnaSWwsVEitpGKPWu
Generated by Claude Code