[NickolasBenakis]

Makes hookgres.dev feel less templated: motion that reacts to the cursor, a blueprint sketch of how a webhook flows, and a real chart for the retry simulator.

What changed

• Hero dot field (site/motion.js): a canvas grid behind the hero. Dots near the cursor turn blue and move aside, and faint streaks cross toward the code window. It's densest behind the code and fades out under the headline.

• Floating code window: tilts up to ~3° toward the cursor; its shadow falls away from the cursor, as if the cursor were the light (dark mode keeps a faint tinted underlight, since a shadow can't show on black).

• Section labels: mono product terms (BEGIN … COMMIT, webhook-signature, hookgres.deliveries) led by the sketch's packet mark, instead of generic blue labels.

• Cursor spotlight on code windows and interactive panels ([data-spot]): a lit edge plus a faint inner light where the cursor is.

• "How it flows" sketch (new section after the hero): app → one transaction (invoices + hookgres.messages, COMMIT) → three SKIP LOCKED workers → endpoints returning 204, 503→204 and 500. Packets loop while it's on screen (with a short rest between runs) and the failed delivery takes a dashed retry path back. No scroll-triggered draw-in.

• Retry chart: attempts evenly spaced, elapsed time on a log scale, so the curve is the backoff. "Send event" moves a dot along it and colours each attempt.

• Night band: Retries, Signatures and Delivery log sit in a deep Postgres-blue band (soft seams in and out, the hero's dot texture). The closing CTA is a panel of the same band.

• Live delivery log: new deliveries arrive at the top, attempts tick in on the compressed schedule, statuses settle, older rows slide out. Pauses on hover and with a Pause button (WCAG 2.2.2).

• Sketch steps: send() → COMMIT → SKIP LOCKED → POST under the drawing. The lit step follows the packets; hover, keyboard focus or press holds the drawing on a step (on phones, pressing also scrolls the drawing there).

• Numbers each get a small drawing of the default (retry spacing, five-day window, secret overlap, zero-loss grid).

• Signature demo: the signature resolves out of noise when it changes; tampered bytes are marked red. Copy always takes the settled signature.

Behaviour notes

• Loops run only while their element is on screen and the tab is visible.
• Tilt and spotlight run only with a mouse. Touch devices get a still dot grid.
• prefers-reduced-motion: no loops or tilt; the sketch is static.
• Hero streaks stay out of the text (right of the copy, above the feature list).
• Removed: fake window dots on the retry and log panels.
• Fits the existing CSP: motion.js is same-origin, nothing external. No new dependencies.
• On phones the sketch (760px minimum width) scrolls sideways inside its card and can take keyboard focus.

Verification

• pnpm site:build and pnpm lint pass.
• Headless Chrome in light, dark, 390px phone and reduced-motion: no page errors, and no sideways page scroll at 390, 600, 768, 1000 and 1100px.
• vitest wasn't run (its setup needs Docker Postgres). The only landing-page test checks the pricing row, which is unchanged.
• An independent review found 5 issues, all fixed: glow overflow at 450–960px, streak drawn off its row, a loop that could survive a fast scroll, the hidden sketch scrollbar, and an always-on animation on phones.

Follow-ups

• Turning on reduced motion mid-visit only applies after a reload (the existing page code works the same way).
• The 404 page and the docs don't have the new motion yet.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
hookgres	Ready	Preview	Nov 13, 2026 6:56pm UTC