Developer Tool Website Template

£29 View live demo or the whole Vault, £99

An eight-page developer tool website template with signature page transitions and a real light and dark theme: home, product, pricing, changelog, customers, a customer story, docs and sign-up. The worked example is a background job service with a live queue you can run and break. Re-points to a developer tool, an API product, an analytics or fintech SaaS, logistics software, or any multi-page software site.

ScrollTrigger Lenis advanced

17 more details

page-transitionsoft-navigationmega-menutheme-switchinteractive-simulationpricing-calculatorscrubdrag-interactionkeyboard-navigationfocus-managementscroll-revealstaggerclick-togglefiltertabsscrollspy 5 colour palettes

Colour

The business, people and figures in this demo are made up for the example. Any resemblance to a real company is a coincidence.

Released 31 October 2026

About this template

Runwell is a complete eight-page website for a software product, built around two things a one-page template cannot do: moving between pages, and letting a visitor handle the product before signing up. Home, Product, Pricing, Changelog, Customers, a customer story, Docs and a sign-up page are eight real HTML files, and a click between them never reloads the browser. The header, the theme and the scroll carry straight across.

Read the full template overview

The design is a full-bleed night photograph with the promise and a form-shaped call to action set in its sky, then calm pale pages with product objects sitting on soft tiles, broken by deep petrol panels that carry a grid of small live diagrams in one lit amber and long plain-spoken reasons in two columns. It has one sans and one mono, and the light and dark themes are both designed rather than inverted.

The home page's lead is a queue the visitor operates: run a batch, make a job fail, watch it back off and try again through the panel, and replay it from history. Every figure on the panel is read from the state of the queue. Each other page has its own hands-on moment: a retry policy you can set, a calculator on run volume, a changelog filter with a proper empty state, customers you can filter with a total that adds up, an outage you can drag through hour by hour, a quickstart with language tabs, and an honest sign-up form.

Making it yours is mostly copy and photographs. The fictional product is a background job service, but the chassis suits anything sold on a website with more than one page. Repaint the tokens for both themes, replace the photographs, change the plan figures in the markup, and add a page by copying a file.

Developer Tool - website template preview

What's included

13 items

Eight real HTML pages joined by a signature transition: the blocks of the page fill as run bars of different lengths, the same cells move and resize into the blocks of the next page, and the clicked link stays lit until it lands on the new heading
A real light and dark theme, applied before first paint, defaulting to the visitor's system preference and remembered between visits, with the theme change playing through the same cells
Five colourways, each with its own light and dark theme: petrol and amber, aubergine and coral, forest and marigold, midnight and ice, and a black and white mono. The photographs take on the colour of each one, and one attribute on the html tag chooses it
A live queue on the home page with three workers: run a batch, make a job fail once or keep failing, watch it back off with a doubling wait, and replay it from history, with every figure read from the queue's state
Six small line diagrams in one amber on a deep panel, playing only while they are on screen, followed by long reasons in two columns
A retry policy builder with presets, range controls, a chart and code that follow your settings
A pricing calculator on a log scale from 10,000 to 50 million runs that reads its plans from the markup, lights the plan that fits and writes out the arithmetic
A changelog filter by kind, month and text, with a release chart built from the entries, a results count and a proper empty state
A customers page with a filter and a total that adds up what is on screen, and a customer story with a night-long outage you can drag through
A believable docs landing page: quickstart in four languages with remembered tabs, copy buttons, a simulated worker log, guides, an API table and on-page contents
A front-end sign-up form with inline validation, a live preview of the first job and a plain statement that nothing is sent
A mega menu that reshapes between views, and a phone menu designed as a queue of pages with the theme control inside it
Every page works with JavaScript off and with the animation CDN blocked: links are real hrefs and the content is a readable document

Perfect for

5 use cases

Any software product that needs more than a landing page: home, product, pricing, changelog, customers, docs and sign-up
Developer tools, APIs and infrastructure products where visitors expect docs and a dark mode
Analytics, fintech and usage-priced SaaS, where a pricing calculator says more than three static cards
Logistics and operations software that wants a strong customer story with figures
Agencies and freelancers who need a multi-page software site with navigation and transitions already solved

How it works

5 sections

Two layers, one script

The site is split into chrome and page. The header, mega menu, phone menu, theme, smooth scroll and transition layer are built once and never torn down. Everything inside the swapped page has its own setup and teardown, so a queue, a chart or a filter from the page you left cannot leak into the one you arrive on.

The page transition

The exit starts on the click while the next page loads underneath. Each block of the page fills as a run bar at its own length, so a full-bleed section reads as a run chart rather than one flat panel. When the next page is live, those same cells move and resize to its blocks, dividing where it has more and merging where it has fewer, and the lit cell lands on the new heading. Then they drain and the real page is there. Back runs the other way, and a new section joins in by carrying a small data attribute.

The live queue

The panel on the home page is a small simulation that runs only while it is on screen. Jobs wait, run on one of three workers and either finish, or fail and wait for a doubling delay before trying again. After four attempts a job gives up and can be replayed from history with its original input. The figures, the status line and the history are all read from that one state, so they always agree.

Pricing from the markup

The three plan cards carry their own numbers: runs included, monthly base and the rate per 10,000 runs over. The calculator reads those and nothing else, works out the cheapest plan for the volume on the control, and writes out the working, so changing a price in the markup changes the whole page.

Without JavaScript or motion

Every link is a real href, so the site is an ordinary eight-page website if the router never runs, and the footer lists every page. If the animation CDN is blocked the content shows as a readable document. Under reduced motion, pages swap with a short crossfade, the queue's jobs move without travelling, the diagrams hold still and the outage opens on its finished night.

Plugins ScrollTrigger

Difficulty Advanced

Smooth scroll Lenis integration

Colour palettes 5 ready-made palettes, each measured for AA contrast. Switch with one attribute, or copy the values you want into :root. Try them in the preview above.

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (8 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

The demo is a background job service. What else does this design suit?

Any software sold on a site with more than one page: a developer tool, an API product, analytics, fintech, logistics or usage-billed SaaS. The queue is the part most tied to the fiction, and its job names, worker count and attempt limit are simple settings at the top of its code. Replace the night photographs with your own and the panels still work.

Can customers really sign up through the start page?

No. The start page is an unwired static front end that collects a name, work email, project name, region and plan, checks them in the browser and sends nothing, and it says so on the page. Point the form at your own sign-up endpoint, a form service such as Formspree or Netlify Forms, or your CRM, and replace the confirmation panel.

Is the queue on the home page connected to anything?

No, it is a simulation running in the visitor's browser, and the page says that. Nothing is stored and it resets when the page does. You can keep it as a demonstration, rename its jobs to match your product, or delete the whole section and the rest of the page carries on working without any other change.

Can I change the plans and prices in the calculator?

Yes, in the markup alone. Each plan card carries the runs it includes, its monthly price and its rate per 10,000 runs over. Edit those and the calculator, the highlighted plan and the written working all follow. Rename runs to whatever you meter, such as seats, requests or gigabytes, in the labels around it.

Do the page transitions work on ordinary hosting?

Yes, on any static host such as Netlify, Vercel, Cloudflare Pages, GitHub Pages or shared hosting. The pages need to be served over http or https because each one is fetched before it swaps in. Opened straight from a hard drive, the links simply navigate the normal way and nothing is broken.

How do I add a ninth page or a new section?

Copy any page file, change the content inside the main element and add a link in the header and footer. No route table needs updating. To have a new section take part in the transition, give it a data-cells attribute, set to whole or split, as the README explains. Scripts that a new section needs go in the shared script as a new setup function.

Does the light and dark choice survive moving between pages?

Yes. The choice is saved in the browser and applied by a small script in the page head before anything is drawn, and a soft navigation never touches it. A first-time visitor gets their system's setting. To ship one theme only, delete the dark token block and the toggle buttons.

Can I change the colours without repainting the site myself?

Yes. Beside the petrol and amber default there are four ready colourways, each with its own light and dark theme: aubergine and coral, forest and marigold, midnight and ice, and a black and white mono. One attribute on the html tag chooses one, the photographs take on its colour so they still belong, and you can delete the ones you do not want.

Paid template

Purchase to unlock the code.

Buying Developer Tool opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

Upload the folder to any static host, or serve it locally with any static server. Pages must be served over http or https for the soft navigation to run; opened from a file, links simply load normally.
Open index.html. There is no build step.
Edit the copy in each page, then the tokens at the top of assets/style.css.

The pages are index.html, product.html, pricing.html, changelog.html, customers.html, customer-story.html, docs.html and start.html.

Using It With Your Own Design

Colour and type: everything comes from the token block at the top of assets/style.css, once for light and once under [data-theme="dark"]. Start with --deep and --signal, or pick one of the ready colourways.
Copy and figures: all of it is in the HTML. The site's standing figures (runs, pickup, attempts, history) appear on several pages, so search for them when you change them.
Photographs: replace files in assets/img/ using the same name and proportions, and rewrite the alt text. The opening works best with a photograph whose top half is dark and quiet.
Header and footer: the header is repeated at the top of each page's body and the footer at the end of its page, so change them in every file. The header is identical on purpose, because it survives every navigation.

Pages and how to configure them

Page transition and router

assets/page-router.js handles links, fetching, history, scroll and focus. Do not edit it. assets/script.js supplies the transition (search for "THE PAGE RE-PLANS") and one setup function per feature.

Sections take part in the transition through data attributes:

Attribute	Meaning
`data-cells="whole"`	The whole element is one block; tall ones are cut into lanes
`data-cells="split"`	Each child is a block
`data-cells-self`	This element is a block

Anything on a page without one of these simply appears when the page is revealed, so give every visible section one. Add class="head-over" to a page's <body> when it opens on a photograph and the header should sit transparently over it.

Scripts inside a fetched page never run. A new feature goes in assets/script.js as a setup function that is called from initPage and registers its cleanup.

Home: the live queue (`data-queue`)

A simulation in the browser. At the top of initQueue you can change WORKERS, MAX_ATTEMPTS and JOB_NAMES. Delete the section and nothing else needs to change.

Home: diagrams (`data-diagrams`)

Six inline SVG line drawings, named with data-dia. Removing one removes its animation.

Product: console, job life and retry builder

Console tabs are ordinary tables in tab panels. In the job life panel, each data-stage button shows the data-lv view at the same position. The retry builder's presets are written as data-preset="attempts,first wait,multiplier,jitter".

Pricing: calculator (`data-calc`)

Each plan card carries data-included, data-base and data-over (the rate per 10,000 over). A plan with data-over="0" is only offered up to its included volume. The table's data-col values match the card's data-plan.

Changelog (`data-changelog`)

Each .entry needs data-kind (feature, fix, sdk, breaking) and data-month (YYYY-MM). The chart, totals and filter are built from these.

Customers (`data-customers`)

Each .cu needs data-work (one or more words, space separated) and data-runs in millions. Filter buttons name a data-work value. The total adds up whatever is showing.

Customer story: outage (`data-outage`)

The night is modelled at the top of initOutage: start, down and up times and the rate at which the backlog clears. Change those and the chart and figures follow. Replace the story and delete the section if you have no equivalent.

Docs (`data-docs`)

Tabs and code blocks are matched by data-lang and data-lang-code. Sidebar and contents links point at ids on the page. Guide cells carry extra search words in data-terms.

Start: sign-up (`data-start`)

This form is an unwired static front end. It collects a name, work email, project name, region and plan, validates them in the browser and sends nothing. To connect it, replace the submit handler in initStart with a call to your endpoint (Formspree, Netlify Forms or your CRM). The address typed into the home page form travels to this page in sessionStorage, never in the URL.

Palette

Token	Light	Dark	Role
`--ground`	`#F3F5F3`	`#071A20`	Page
`--tile`	`#E3E9E7`	`#0E2A33`	Soft tiles
`--ink`	`#0B1F26`	`#EAF1EF`	Text
`--deep`	`#04303C`	`#06404F`	Panels
`--signal`	`#FFB400`	`#FFB400`	The lit colour, on deep surfaces and photographs

Amber text on pale ground uses --signal-ink. --signal-hover is a signal button under the pointer and --hatch is the second stripe of a failed job. Measured contrast pairs are in the comment at the top of the stylesheet.

Colourways

Five looks ship in assets/style.css, each with a light and a dark theme. The type, layout, copy and motion are the same in all of them.

Look	`data-palette`	Panels	Signal	Page and tiles (light)	Photographs
Petrol and amber	none, the default	`#04303C`	`#FFB400`	`#F3F5F3`, `#E3E9E7`	Full colour
Aubergine and coral	`aubergine`	`#35123B`	`#FF7D61`	`#F7F3F5`, `#ECE1E8`	Toned to plum
Forest and marigold	`forest`	`#12402E`	`#FFCF1A`	`#F5F5EC`, `#E5E9DA`	Toned to green
Midnight and ice	`midnight`	`#0C1B47`	`#8AD4FF`	`#F2F5FA`, `#E0E7F3`	Toned to navy
Mono	`mono`	`#000000`	`#FFFFFF`	`#FFFFFF`, `#F0F0F0`	Greyscale

To choose one, set the attribute on the <html> tag of all eight pages:

Code snippet omitted: it ships with the download.

To delete the ones you do not want, remove their :root[data-palette="..."] blocks from the top of the stylesheet, along with any :root[data-palette="mono"] rules under "Colourway details" at the end. If you keep none, also delete the "Colourway photographs" and "Colourway details" sections at the end of the file; nothing else depends on them.

To make your own, copy a block and change its values. --photo-filter holds the hue the photographs turn to. A filter cannot read a colour token, so when you change --deep, change the hue-rotate to match. Any image inside <main> takes the filter, except an .svg file, so give a logo the .svg format or leave it out of <main>. Keep to 4.5:1 for text on every pair, and check the failed job in the queue, whose text sits on --hatch.

The four added colourways were measured as rendered on all eight pages, including hover, focus, form errors and open menus, and all their text clears 4.5:1, or 3:1 where it is large.

Type

Funnel Sans and Sometype Mono, both self-hosted in assets/fonts/ under the SIL Open Font License.

Images

The photographs are bundled as optimised, graded WebP files in assets/img/. To replace one, keep its filename and proportions, and update its alt text. The home and yard photographs were generated for this template, and the rest are from Pexels under the Pexels licence. Small lettering may remain on containers in other port photographs, such as the customer story opening: check these if your use is sensitive to third-party marks.

File	Source
`harbour*.webp`	Generated for this template (no real company names)
`night-sea.webp`	https://www.pexels.com/photo/12810604/
`foreman*.webp`	https://www.pexels.com/photo/36672961/
`yard.webp`	Generated for this template (no real company names)
`cranes-dusk.webp`	https://www.pexels.com/photo/38305357/
`platform-team.webp`	https://www.pexels.com/photo/3932234/
`port-dusk.webp`	https://www.pexels.com/photo/10770462/
`dark-water.webp`	https://www.pexels.com/photo/34155535/
`breakwater.webp`	https://www.pexels.com/photo/10094885/
`ferry.webp`	https://www.pexels.com/photo/30942322/
`print-works.webp`	https://www.pexels.com/photo/9313701/
`tram-rail.webp`	https://www.pexels.com/photo/32063429/
`warehouse.webp`	https://www.pexels.com/photo/4487383/
`analyst.webp`	https://www.pexels.com/photo/12903349/
`face-a.webp`	https://www.pexels.com/photo/3771123/
`face-b.webp`	https://www.pexels.com/photo/7562316/
`face-c.webp`	https://www.pexels.com/photo/10159280/

Accessibility

Native controls throughout: buttons, range inputs, radio groups, details and forms. Tabs use the ARIA pattern with arrow keys.
After a soft navigation, focus lands on the new heading and the title is announced. The focus outline shows only for keyboard use.
The queue's moving chips are hidden from assistive technology; the status line, figures and history carry the same information.
Under reduced motion, pages crossfade, chips jump, diagrams hold still and the outage shows its finished night.
The phone menu traps focus, closes on Escape and returns focus to its button.

Dependencies

GSAP with ScrollTrigger and Lenis, loaded from CDNs at the bottom of each page. GSAP floor 3.12+; this demo is pinned to 3.15.0. Add ?smooth=off to a URL, or data-smooth="off" on <html>, to turn smooth scrolling off.

Teardown

window.gsapContext.revert() tears down the router, page features, smooth scroll and transition layer, and leaves a plain document.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.