15 · Dispatch: a landing page whose hero is the working product

Dispatch is a fictional day board for small service crews (plumbers, installers, landscapers). The hero is not a screenshot. It is a working board with three crews and eight jobs. You can drag jobs between crews, the route map redraws, and a command palette, toasts and undo all work. The page also operates itself: a "Watch it work" button sends a ghost cursor through the real interface, and "Play the day" runs the vans around the map from 7:30 AM to 6:30 PM. Then, as you scroll, the app window shrinks into the first feature section and later zooms into the map, a job card and the search button. A real app inside that choreography is what makes people stop.

Inspiration

This site comes from the second reference list. It borrows the look from Kage's monochrome-editorial and minimal-gradient SaaS landing pages, and the structure from The Component Gallery, which compares one component across design systems. Here that becomes a "Component index" section with tabs, toast, dialog, tooltip, dropdown, switch, segmented control, skeleton, empty state and a sticky-header table. Each card shows a live demo and its ARIA role, and the same components run the board above it.

The Motion Primitives ideas are rebuilt by hand. Text Roll is on the nav links. Sliding Number drives the stats and prices. Morphing Dialog is a view transition from the clicked card to the job dialog. Infinite Slider is the integrations row. Scroll Progress is the top bar. Spotlight is on the "Shop" pricing card, and the same idea returns as a cursor-following light on the hero dot grid. Navbar Gallery supplies the floating pill nav and mega menu. CTA Gallery supplies the fused email field. Footer Design supplies the giant wordmark and live clock in a footer that sits under the page.

Added on top: the shrink-into-page trick, the board itself, and in this revision the arrival sequence, the ghost-cursor tour, the day playback, the pinned zoom section and a night theme.

Visual direction

• Palette (day): warm white #fbfaf8, greys #f4f2ee, #ecebe6, hairline #e6e3dd, ink #171613, one accent green #0f6b4a (tint #e5f1eb), warning amber #b45309. Crews are blue #2a5bd7, rust #c2410c and violet #6d28d9. Night shift swaps surfaces through CSS variables: #121311 page, #1c1d19 surfaces, #ecebe3 ink, a brighter green #3bbd8b.
• Fonts: Schibsted Grotesk for display (800 weight, tight tracking), Figtree for body, Geist Mono for data and labels. All load from Google Fonts.
• Motion: one spring curve, cubic-bezier(.32,1.4,.5,1), on almost everything: nav shrink, text roll, number digits, segmented pill, switch, toasts, menus, timeline bars, headline words.
• Layout: 1180px column, 8px rhythm, hairline borders, soft shadows. The app window is sticky below the nav, scales and translates into a slot beside the feature copy, then pins again in a zoom section while captions swap on the left.
• Signature moments: a sub-2.5-second arrival (headline words roll in, window fades up, cards deal into columns, routes draw, three stats count up); the ghost-cursor tour; the day playback with vans and drawing trails; the window shrinking into the page; the pinned zoom with a ring, dim mask and label; cards sliding on every change (FLIP); digits rolling; the amber bar over 8 hours; the dialog growing out of the card; the footer wordmark parallaxing as the page lifts away; the night flip.

References

• Kage, https://kage.design: monochrome-editorial and minimal-gradient SaaS styling; the restrained warm-white page with one accent.
• The Component Gallery, https://component.gallery: the component index section, naming each control once and showing it next to its role.
• Motion Primitives, https://motion-primitives.com: Text Roll (nav), Sliding Number (stats, prices, totals), Morphing Dialog (job dialog), Infinite Slider (integrations row), Scroll Progress (top bar), Spotlight (hot pricing card, hero dot grid).
• Navbar Gallery, https://www.navbar.gallery: floating pill nav that shrinks on scroll, mega menu with a featured card.
• CTA Gallery, https://www.cta.gallery: the email field fused with its button, with a shake on invalid input.
• Footer Design, https://www.footer.design: oversized wordmark footer revealed from under the page, with a live clock.
• Magic UI, https://magicui.design, and Aceternity UI, https://ui.aceternity.com: the general pattern of motion components (marquee, spotlight, tilt cards, border beams, number tickers) that the hand-rebuilds follow.

Why these choices

A tool whose pitch is "the demo is better than the copy" should show the demo. The first version let visitors play. In a second pass, the page now also plays for them: the tour and the day playback show the product working without anyone touching it, and both give way the moment a real input arrives. The page stays warm-white and quiet so the board carries the colour. There is no WebGL. A single spring and one component set across app and page make the Component Gallery argument visible: this is one system.

Trade-offs show in the code. The scroll trick uses animation-timeline: scroll() when supported and a JS-driven --p variable otherwise, with the slot re-measured on resize and font load. The zoom section is JS-driven from scroll, with the transform origin blended between three stops. Below 900px the shrink and zoom are off, the captions stack, and the board scrolls sideways. The arrival skips on any real press, key, wheel or touch, and with reduced motion it does not run at all. The tour ignores synthetic events so its own fake drag cannot stop it, but stops on any trusted one. The day pauses when the tab hides or the window scrolls out of view. Night theme is saved in localStorage inside a try block. The cost is a file that depends on Google Fonts, uses blur on the nav and dialog backdrop, and runs several animation loops.

Who this kind of site is for

It wins for SaaS and app landing pages, developer tools, internal-tool pitches, and design-system documentation: anything where a working demo beats paragraphs. It suits a product with one clear screen. It is the wrong call for a business with no product to demo (a restaurant, a law firm), for content-heavy sites, or for audiences on old browsers and slow phones, since the hero is a real app plus a tour and a simulation.

How to make it

Stack and key techniques

• One HTML file, 1,299 lines, no libraries, no build step. Only external dependency is Google Fonts.
• Board render with a FLIP animation for every card on each change.
• Pointer-event drag with a ghost, a placeholder and a computed drop index.
• Schematic SVG route map with stroke-dash redraw; route miles from straight-line distance.
• Sliding-digit numbers built from a column of digits moved with translateY.
• Command palette (Ctrl+K) with filter, keyboard selection and Escape.
• <dialog> morph via document.startViewTransition, with a Web Animations FLIP fallback.
• Scroll-driven shrink: CSS scroll timeline with a JS fallback.
• Pinned zoom: scroll-driven scale with a blended transform origin, a measured highlight ring and caption crossfades.
• Arrival sequence on the Web Animations API, skippable.
• Product tour: an SVG ghost cursor that dispatches the same pointer events and clicks a user would, with abort and cleanup.
• Day playback: a requestAnimationFrame clock, a per-crew schedule, van positions interpolated along the route, dash-offset trails.
• Pointer effects: hero spotlight mask, 3D card tilt with sheen, magnetic logos, a conic-gradient border trail via @property.
• Night theme through CSS variables; word-by-word headings; footer parallax.
• Generic tabs, menus, segmented controls and switches with ARIA roles and arrow keys.

The prompt

Build a single-file website (index.html, no libraries, no build step, only Google Fonts allowed) for "Dispatch", a fictional day board for small service crews (plumbers, installers, landscapers). Fictional company and customers, no testimonials, no real brand logos. The hero IS the working product.

Visual direction: restrained, monochrome-editorial, no glow or glass on content. Background #fbfaf8, greys #f4f2ee and #ecebe6, hairline #e6e3dd, ink #171613, accent green #0f6b4a, amber #b45309. Crew colours blue #2a5bd7, rust #c2410c, violet #6d28d9. Fonts: Schibsted Grotesk (display, 800), Figtree (body), Geist Mono (data). 8px rhythm. One spring curve, cubic-bezier(.32,1.4,.5,1), for every motion. Put every colour in CSS variables so a night theme can flip them.

Signature moments:
1. Board: a browser-style window with three crew columns, eight jobs (customer, address, time window, duration, tags), per-crew hours bar turning amber over 8 hours, side panel with Map and Table tabs. Drag with a ghost and dashed placeholder, FLIP on every card, toast with working Undo, schematic SVG map whose route lines redraw, odometer digits, Ctrl+K command palette, a job dialog that morphs from the card (View Transitions, with a FLIP fallback) and per-card menus for keyboard users. Skeleton on load, empty state for an empty crew.
2. Arrival under 2.5 seconds: headline words roll in, eyebrow, lede and buttons rise, window fades in while its contents spring up, skeleton lifts, cards deal into columns one by one, routes draw, three stats count up. Skip on any trusted press, key, wheel or touch (jump to final state, numbers correct). Reduced motion: none of it.
3. "Watch it work" tour: a drawn SVG ghost cursor with a caption bubble that uses the real drag code to move a job to another crew, opens the palette with the real button, types "kettle", presses Enter, opens a job dialog from its card, closes it, hits Undo, then hands over. Status pill with a Stop button and an aria-live narration. Abort instantly on any trusted input and clean up any synthetic drag.
4. "Play the day": a clock pill from 7:30 AM to 6:30 PM. Cards light up while a crew is on site and get a check when done, timeline segments dim and fill, each crew's van drives its route with a trail drawing behind it, a live status line reads the day. Pause, replay, survives drags mid-play, pauses when the tab hides or the window scrolls off.
5. Shrink-into-page: the window is sticky, then scales into a slot beside the first feature section. animation-timeline: scroll() when supported, JS variable otherwise. Measure at layout time, on resize and on font load. Off under 900px.
6. Pinned zoom section: the settled window stays put while three captions swap on the left and the board zooms (transform-origin blended between stops) into the map, a job card and the search button, each with a highlight ring, dim mask and label. Stacked static captions on phones.
7. Light and depth: cursor spotlight on the hero dot grid, a slow light sweep over the window chrome, 3D tilt with sheen on three feature cards, a conic border trail on the middle pricing card, window shadow deepening as it settles.
8. Rest of page: floating pill nav with text-roll and mega menu, scroll progress bar, word-by-word headings, stats with sliding numbers, integrations slider whose logos lean toward the pointer, a Component index with live demos (tabs, toast, dialog, tooltip, dropdown, switch, segmented, skeleton, empty state, sticky table), three pricing cards with a monthly/yearly toggle, a CTA band with a drawing accent line and a fused email field that shakes on error, a footer with a giant wordmark that parallaxes as it is revealed, and a live clock. A moon button flips the whole page to a night theme and saves it in localStorage.

Constraints: semantic HTML, ARIA for tabs, menus, switches, radiogroups, dialog and live regions, visible focus, arrow keys, prefers-reduced-motion respected, no horizontal overflow, mobile board scrolls sideways. Zero em dashes in copy.

Verification loop: screenshot the arrival, mid-tour, mid-day, all three zoom stops, night theme, the footer and a phone size. Read the console. Script the key paths (drag and undo, palette, dialog focus return, yearly toggle, bad and good emails, tour start and stop on real input, arrival skip, theme persistence, reduced motion). Fix every problem and repeat until clean.

Build notes

• Drag could not start from the customer-name button at first, and a drop also fired the click and opened the dialog. Both were fixed. Focus now returns to the button that opened the dialog.
• Four bugs surfaced in the upgrade: a class name collision between the "How it works" link and the drag-ghost card; zoom captions not sticking; stat numbers showing 0 if the arrival was skipped early; and the live status line overlapping the stats on phones.
• The scroll trick checks that the CSS animation range was actually applied before trusting it, and falls back to JS if not.
• The tour dispatches synthetic pointer events and filters on isTrusted, so only real input can stop it. Ending it also releases any drag still in flight.
• Checks reported by the builder: 24 original interaction checks plus 22 new ones pass, with zero console errors. All of it ran in a software renderer.
• Untested, per the builder: the tour and the day loop were never watched at real frame rates. The JS scroll fallback was read but not exercised in the original pass, and the footer reveal was judged from stills.

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the reasoning rests on the spec table, Anthropic's own pages, earlier-generation reviews and extrapolation.

Rough overall estimate, as a judgment call: Opus 5.5 keeps roughly 80 to 90 percent of the impact, since the gap to Fable 5.1 on a restrained design is probably small but the added choreography has many places to slip. Sonnet 5.5 keeps roughly 55 to 70 percent, mainly losing the tour's real-code driving, the zoom and the scroll choreography. A screenshot-and-fix loop, plus building the app first and the tour, playback and zoom as later passes, would likely close most of the gap for either model.