Relay
A developer API product site template.
A complete website for an API or developer tool, built with Astro 5, TypeScript, plain CSS, Motion and anime.js, with one three.js moment: under the hero's live console, a field of dots where every sample event the terminal prints crosses the relay as a packet, and a failed delivery waits and pulses until it is retried. Sample content is a fictional webhooks relay called Tern, so you see the home page, docs, pricing, changelog and status page at real density before you put your own in.
- For
- Developer tool / API
- Built with
- Astro 5, TypeScript, plain CSS, Motion, anime.js, three.js
- Pages
- 7 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
The 3D moment
A relay field of dots on slow swells under a live console: each terminal line crosses as a packet, and failed deliveries wait and pulse at the relay until retried.
What you get
Straight from the template's README, the same file you will find in the repository.
- Eight page types, all generated from one content file: home, docs overview, a page per doc, pricing, changelog, changelog RSS feed, status and 404.
- A hero that shows the product working: the newest release as a pill above the headline, proof figures right under the buttons, and beside them a console that creates a destination in curl, Node and Python and a terminal that relays sample events line by line, with a Pause button.
- A dashboard on the home page: the signed-in view (sources, four tiles, events per hour, recent events) settles flat as it scrolls in, its bars rise and its latency line draws.
- A quotes deck: sample quotes as a card shuffle that fans, closes and tucks its top card under, with Previous, Next and Pause, and a still stack under reduced motion.
- Drawn to a grid: every section after the hero sits between hairline rules with small corner crosses, and the flow diagram's connectors draw in and carry a packet.
- The signature scene: the relay field, a dot surface on two slow swells. Each terminal line sends a packet across it; failed deliveries wait at the relay and pulse until they are retried, and the field ripples where they are released or where your pointer passes. Lazy loaded, paused off screen and in background tabs, pixel ratio capped at 2, still under reduced motion, and a matching drawing generated at build time underneath for when WebGL is missing or script is off.
- Code samples done properly: language tabs that follow the ARIA tabs pattern and remember your language across the whole site, copy buttons, and build-time syntax colours in both themes with no client-side highlighter.
- A docs section: grouped sidebar that folds on phones, typed content blocks (paragraphs, code, tabbed code, notes, lists, tables), "On this page" that follows your reading position, previous and next links, and an overview with a live page filter and an empty state.
- Pricing with a volume slider: each plan's monthly cost worked out for the chosen number of events, the cheapest fit outlined, an enterprise row, a full comparison table and billing questions.
- A changelog with version tags, New, Improved and Fixed entries, linkable releases and an RSS feed.
- A status page with 90-day uptime bars per component, a key, past incidents with timed updates and an incident-updates form with invalid, sending, sent and failed states (demo mode until you connect a service).
- Light and dark themes that follow the system, with a switch that opens the new theme as a circle from the button and remembers the choice. The scene, the code colours and the status colours follow it.
- Accessible and fast: semantic HTML, a skip link, visible focus everywhere, AA contrast in both themes for every colour role including code and status colours, 44 px touch targets, two self-hosted variable fonts, no trackers, no runtime CDN, no layout shift from the scene. Every animation respects reduced motion.
- Code that fits: code and terminal are sized for Martian Mono's width (measured in
docs/DESIGN-DNA.md); the terminal picks its columns from its own width, and a code line longer than its box wraps under a hanging indent instead of scrolling sideways. - Responsive from 320 px to wide desktop, designed at 390, 768 and 1440.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Docs overview
- Doc page
- Pricing
- Changelog
- Status
- 404
Stack
- Astro 5
- TypeScript
- plain CSS
- Motion
- anime.js
- three.js
What is not included
- A real backend: sign-in, the dashboard, the subscribe form and the status data are front-end designs with sample data.
- A full-text docs search service. The overview filters the docs pages in the browser; for a large docs site, add Pagefind or Algolia.
- A syntax highlighter for many languages. The built-in one covers bash, JavaScript, Python, JSON and HTTP; swap in Shiki through Astro's
<Code>component for more.
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
