Voltmesh

What this is

Voltmesh is a landing page for a product that does not exist.

The premise: people with idle NVIDIA GPUs connect them as nodes and earn hourly; AI teams bid for that capacity in hourly sealed second-price auctions; jobs are scheduled onto the nearest healthy node that fits their VRAM class. It is a coherent premise, and none of it is real — there is no company, no marketplace, and every figure on the page is illustrative. The page says so itself, in the last FAQ entry.

The fiction is the point. A landing page is judged on whether it makes a complicated proposition feel obvious, and inventing the proposition meant I could make it exactly as complicated as the exercise needed: two audiences with opposing incentives, a pricing mechanism most visitors have never heard of, and numbers that have to feel credible without being verifiable.

Content is not in the components

Every user-visible string lives in one file, lib/landing-content.ts, grouped by section. Components take a typed content prop and render it. No copy is embedded in JSX.

export default function Hero({
  content = LANDING_CONTENT.en.hero,
}: {
  content?: LandingContent['hero'];
}) {

Icons, SVG paths, map coordinates and colour classes are deliberately not content — they stay in the components, paired positionally with their content entries. The split is "would a translator need to change this?", not "is it data?".

That makes the structure i18n-ready at one locale. type Body = typeof EN means a translation file annotated const XX: Body = XX_BODY fails the build on a missing or renamed key, rather than rendering undefined in production.

One file to rebrand

site.config.ts holds everything that asserts who publishes this site — name, wordmark, description, keywords, legal entity, canonical origin. Nothing else hardcodes product identity.

The LEGAL_ENTITY block feeds a JSON-LD Organization node. Its fields are empty and stay empty: blank fields are dropped from the emitted structured data rather than shipped as placeholders, which is the correct behaviour for a company that does not exist. Filling them with plausible-looking values would put fabricated business details into search-engine structured data.

Restraint as a colour system

The page is achromatic apart from one red. brand is a neutral ramp; the only saturated token is signal, centred on #ff3b30.

This started as a rebuild. The first version shipped in the palette every AI-infrastructure landing page uses — a blue brand, a violet accent and an electric-cyan signal on a blue-black canvas — and looked generic in a way that had nothing to do with how it was built. Making red the only saturated hue meant nothing competes with it, so the eye goes where the page intends.

Two things that recolour did not survive on their own, and are worth naming because both are invisible until you look:

• Tokens do not catch everything. 99 usages referenced semantic scales and repainted for free, but the primary button, the global focus ring and the WebGL shader array all bypassed the tokens with literal hex. Those are the loudest elements on the page.
• Assets are code too. The avatar SVGs, logo mark, world map and manifest theme colour live in public/ and were missed by a source-only sweep. The blue avatars were visible on the rendered page while every .tsx file was already clean.

Contrast was checked rather than assumed. White on #ff3b30 measures 3.55:1 — under the 4.5:1 floor for a button label — so the primary button uses a near-black label at 5.58:1 and keeps the vivid red.

How it is built

Next.js 14 App Router, React 18, strict TypeScript, Tailwind, Framer Motion, and a WebGL hero via @paper-design/shaders-react. Thirteen page sections composed by LandingPage.tsx, plus SSG article pages and legal routes.

The whole site prerenders to 11 static routes — no backend, no database, no runtime API calls. The shader is the only client-side dependency of note, loaded with ssr: false and marked aria-hidden; the headline, copy and CTAs above it are plain markup that stays in the server-rendered HTML. If WebGL fails, the page still reads.