case study / the redesign
This site, rebuilt as static HTML.
The claim on the home page is that the simplest stack outlasts the rest. This is that claim, shipped.
The brief
The site had one job it was failing at: it argued that Trilot builds long-form software with editorial care, while being a page that could have belonged to anyone. The brand's whole image is three ink-brush strokes — sage, rust, sky — converging into a single point. On the old site that idea lived in a static illustration. It needed to be the thing you experience.
The constraint was self-imposed and stated publicly: no framework. Most projects do not need what React gives them, and a marketing site with a handful of interactive moments is the clearest case of that.
What we did
- Wrote the pages by hand, and wrote a small build script that assembles them — so content lives in modules while the deployed artefact stays plain static HTML.
- Built the hero in WebGL: three ribbons generated from curves, drawn on in real time with a staggered hand, textured with a shader-level dry-brush bristle, converging on one luminous point.
- Linked the brand's convergence idea to scroll: on the About page, three swirls of ink dust break orbit and fuse into a single core as the section passes.
- Built the design system on registered CSS custom properties, so palette values, hairline rules and angles interpolate instead of snapping — and so the whole site re-tints between ink and paper themes.
- Drove the pinned brand rail, the timeline rail and the self-drawing rules from CSS scroll-driven animations, with an IntersectionObserver fallback where the engine lacks them.
- Self-hosted three variable fonts as latin subsets, vendored Three.js locally, and cut every third-party request.
- Wrote the whole thing so it degrades: no JavaScript, no WebGL and reduced-motion visitors all get a complete, readable site.
What shipped
A static site with no runtime dependencies beyond a locally vendored copy of Three.js. Pages are plain HTML with an import map; styles are three hand-written CSS files; the interactive layer is a set of small ES modules that each do one thing and bail out politely when the browser cannot do it.
Structured data was added across the site — organisation, website and page-level JSON-LD — which the previous build did not carry at all. The header, footer, newsletter and consent notice became real markup rather than being injected by JavaScript after load, so they exist for crawlers and for anyone with scripting off.
What it proves
That a studio site can carry a real-time 3D scene, a scroll-driven interface and a full design system while remaining a folder of files that any static host will serve — and that a build step can exist for the author's convenience without becoming a dependency of the artefact.
It is also the honest answer to why Trilot does not reach for a framework by default: the failure modes of a static site are few, and every one of them is legible.
Engagement notes
This is the shape of a web and software engagement: a defined build, a design system that outlives it, and a delivery target that does not require a platform team to maintain. Most engagements run six months and up; this one is deliberately at the small end, and is described in full on the services page.
A note on sourcing: this page describes what was built. Performance and business outcomes are released only with client consent — and here the client is Trilot itself.