mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-28 07:32:52 +00:00
FULL BLEED, FULL HEIGHT. The section is the viewport — edge to edge, and `min-h-svh` rather than `100vh`, because mobile browser chrome makes `vh` taller than the screen and the fold overflows by exactly the address bar. What is capped is the CONTENT: 1600, taking one step to 1920 past 1536. 1920 is the ceiling and it is not a taste — half of it is 928px and the film master is 1920 wide, so a wider box would upscale a crisp render into a soft one. Measured: the film is 574px at 1280, 894 at 1920, 926 at 2560, under 1x at every one. Two even columns, not 5/7: at 1280 the narrow column broke the three actions across two ragged lines. THE TOUR. The hero now tells the arc the cloud is for — models, a route to blend them, an agent with your tools, a sandbox to run them in, memory, a bot in a channel, a site, a store, an order, the bill — twelve beats, typed, looping. Every beat is resolved at BUILD time against the served /v1/openapi.json, beside the products, by the same probe. A beat survives iff the document carries its path AND its verb; the line is ours, the method, the path and the sentence under it are the API's own words, read out of the document. So the hero cannot narrate an operation the platform does not serve. Broken on purpose with an invented path and a real path under a verb it does not have: both dropped, both named, 12/14 → restored 12/12. The product chips are the catalogue's, matched to the beat by API path, with their real icons — all 41 icon names the catalogue uses resolve, so a glyph always belongs to the product it sits for. Six of the twelve operations have no product row (routes, sandboxes, sites, commerce, store): those beats draw no chips rather than borrowing one. MOTION IS OPTIONAL. Under prefers-reduced-motion there is no typing and no auto-advance — the first beat is shown whole and the dots still work. Verified: after 7s the panel had not moved off `GET /v1/models`. One <video> on the page, and the tour never touches it. It pauses on the button, on hover, on focus, and when the tab is hidden. Every box reserves its height, so a short beat and a long one are the same size and nothing shifts under a reader. rAF turnaround while typing: 8-18ms. The dots are 6px drawn inside a 24px target (44 where a finger points). Sized AS dots they obeyed this site's WCAG 2.5.8 floor by stretching into 6x24 bars — the floor is right, the shape was wrong. Measured at 375, 390, 768, 1280, 1920 and 2560 on the production export: zero horizontal overflow at all six; hero exactly 800/1080/1440 at the three desktop heights; "Start building" above the fold at every width.
66 lines
1.4 KiB
JSON
66 lines
1.4 KiB
JSON
{
|
|
"story": "One org, one afternoon: a spaceship shop that did not exist this morning.",
|
|
"beats": [
|
|
{
|
|
"line": "Start with the models.",
|
|
"method": "GET",
|
|
"path": "/v1/models"
|
|
},
|
|
{
|
|
"line": "Blend them behind one route.",
|
|
"method": "POST",
|
|
"path": "/v1/ai/routes"
|
|
},
|
|
{
|
|
"line": "Ask it something.",
|
|
"method": "POST",
|
|
"path": "/v1/chat/completions"
|
|
},
|
|
{
|
|
"line": "Hand it your own tools.",
|
|
"method": "POST",
|
|
"path": "/v1/agent"
|
|
},
|
|
{
|
|
"line": "Let it run code somewhere safe.",
|
|
"method": "POST",
|
|
"path": "/v1/sandboxes"
|
|
},
|
|
{
|
|
"line": "Give it a memory.",
|
|
"method": "POST",
|
|
"path": "/v1/vector"
|
|
},
|
|
{
|
|
"line": "Put it in a channel.",
|
|
"method": "GET",
|
|
"path": "/v1/bot/connect"
|
|
},
|
|
{
|
|
"line": "Build the shop a site.",
|
|
"method": "POST",
|
|
"path": "/v1/sites/deploy"
|
|
},
|
|
{
|
|
"line": "Put it live.",
|
|
"method": "POST",
|
|
"path": "/v1/sites/{slug}/publish"
|
|
},
|
|
{
|
|
"line": "Open the store.",
|
|
"method": "POST",
|
|
"path": "/v1/commerce/product/"
|
|
},
|
|
{
|
|
"line": "Sell a spaceship.",
|
|
"method": "POST",
|
|
"path": "/v1/store/{storeid}/checkout/authorize"
|
|
},
|
|
{
|
|
"line": "Watch what it cost.",
|
|
"method": "GET",
|
|
"path": "/v1/billing/usage"
|
|
}
|
|
]
|
|
}
|