EcoRig — A WebGL Onepager That Sells Curtailed Energy as Compute

EcoRig Technologies sells electricity that was never allowed to exist. When a wind farm produces more than the grid can absorb, the surplus gets curtailed — clean power that was financed, built and ready to flow, then deliberately not produced. EcoRig stations containerized, grid-interactive compute rigs at those sites, absorbs the surplus behind the meter, and converts it into low-cost, low-carbon computation. We rebuilt their marketing site around that single idea: a scroll-scrubbed WebGL particle system that morphs a wind turbine into a lightning bolt into a compute die, over a content layer engineered to be quoted by AI assistants.

The problem

Curtailment is an expensive, invisible problem. Europe wastes terawatt-hours of clean electricity to it every year, and the people who feel it most — wind and solar producers watching revenue get switched off — rarely have a name for the category that fixes it. "Flexible load" is not a phrase anyone types into a search bar. Neither is "energy-to-compute."

So the site has to do the teaching before it can do the selling. It has to explain a grid concept to an energy professional without condescending, make the commercial case to a CFO, and survive the reality that its most likely first impression isn't the homepage at all — it's an AI assistant summarizing the company in three sentences to someone who asked what to do about curtailment.

The previous site did none of that. It was a competent but anonymous landing page: framer-motion, CSS Modules, generic section headings — We Offer, Our Mission, Our Team — and a full-bleed stock video of a wind farm streamed from a third-party CDN. It said nothing a hundred other energy startups weren't also saying, and it gave a crawler nothing specific to quote.

What we built

The hero is the argument

The homepage runs a single THREE.Points system of 20,000 particles that tells the entire business model as you scroll: a wind turbine (generation) morphs into a lightning bolt (the surplus — and EcoRig's brand mark) and then into a compute die (the product). Three shapes, one geometry: the alternate forms ride along as custom buffer attributes and get interpolated in a hand-written GLSL vertex shader, so the morph is a GPU operation rather than a per-frame CPU rebuild.

The details are where it stops being a stock effect. The bolt isn't an approximation of the logo — it is the logo, sampled directly from the SVG path, with a quarter of the particles traced along the perimeter for a crisp outline and the rest packed into the interior by rejection sampling against an even-odd ray cast. Every particle position comes from a deterministic hash rather than Math.random(), so the scene is identical on every reload and every machine. GSAP and ScrollTrigger write scroll progress into a plain mutable object that the render loop reads, which keeps React entirely out of the animation path — no state, no re-renders, sixty frames a second. The scroll mapping has deliberate hold beats: the bolt locks and stays legible for a full fifth of the page, anchored to an intentionally empty section, so the brand mark gets a moment to land instead of flickering past on the way to the next shape.

It degrades honestly. A WebGL capability probe runs before the scene is dynamically imported, so three.js never enters the initial bundle, and the fixed backdrop — carbon ground, volt gradients, a surveyor's graticule — renders regardless. Under prefers-reduced-motion the scene draws exactly one finished frame and stops.

An instrument panel, not a landing page

The design system, "Substation," takes its language from electrical engineering: engineering paper, carbon night, and a volt-lime accent, with chamfered nameplates, circuit traces terminating in diamond junction pads, and waveform textures. Type is split across three voices — Unbounded for display, Manrope for reading, JetBrains Mono for anything that behaves like instrumentation.

That vocabulary runs all the way into the content model. Every claim on the site carries a nameplate code — the eight producer benefits are CUR-01 through INN-08, the process stages ST-01 to ST-04 — stored as machine data and joined to copy by key, so the marketing page reads like a spec sheet for a piece of hardware. The nav carries a live grid-frequency readout that random-walks between 49.96 and 50.04 Hz, written straight to the DOM on an interval with no re-render. The menu is a "switchboard." The 404 reads ERR 404 — CIRCUIT OPEN. The footer signs off: No clean electron left behind.

The system is also enforced by exclusion. The project's own guidance lists banned motifs — pill chips, arches, liquid-fill hovers, dot grids, bracket ornaments — because the fastest way for a distinctive system to decay is one generic component at a time.

The one-line diagram

The process section is an inline SVG single-line diagram in the electrical sense: turbine, containerized rig, compute die and grid pylon, joined by busbar traces. On desktop the section pins and the traces draw themselves along their own path length as you scrub through it; on mobile it plays once on entry; under reduced motion it returns immediately, fully lit. It's the one place where an energy buyer sees the proposition drawn in the notation they already read at work.

Engineered to be cited

The GEO layer is the part that matters when the first impression is an AI answer rather than a page. The site publishes both a compact llms.txt and an extended llms-full.txt, and — critically — both are generated from the same message objects and catalog constants that render the page, so the assistant-readable version can't drift out of sync with the marketing copy the way a hand-maintained file always eventually does. robots.txt names the AI crawlers explicitly, GPTBot and ClaudeBot and PerplexityBot among them, and the JSON-LD graph cross-references Organization, WebSite, WebPage, FAQPage and Person nodes by stable IDs. EcoRig is typed as a plain Organization rather than a LocalBusiness — there are no premises or opening hours to publish — with a knowsAbout array naming curtailment, demand response, grid balancing and green computing, so a model has explicit ground for associating the company with the concepts it should be retrieved for.

The FAQ is native <details>/<summary>: zero client JavaScript, fully crawlable, and mirrored verbatim into the FAQPage schema, so what a crawler is told and what a visitor can read are the same words.

One fix from the week after launch is a good illustration of how specific this work gets. The crew portraits were the only raster images on the page, so Google started drawing a founder's face as the brand thumbnail in search results. The repair was an X-Robots-Tag: noindex on the portrait directory and on Next's image-optimizer route — a header, not a robots.txt block, because a crawler has to be allowed to fetch a file to ever see the directive telling it not to index it — plus a proper 1200×1200 brand plate wired into the Organization and WebPage schema as the image it should use instead.

One language, three-language architecture

The site ships in English only. It's built on the full next-intl routing spine anyway — locale-scoped routes, a typed pathname map, alternates that begin emitting hreflang and x-default automatically the moment a second locale appears — and all three fonts were chosen and loaded with Cyrillic and Latin-Extended subsets already in place. Adding Estonian and Russian later means extending an array and adding a messages folder, not restructuring the app. Building the spine on day one costs an afternoon; retrofitting it after launch costs a rewrite.

Motion that never hides content

One invariant governs the whole build: the real text and the real numbers are always in the server-rendered HTML underneath the animation. Headline splitting happens after hydration, counters server-render their final value and only replay from zero on the client, the process diagram ships fully lit and JavaScript dims it in order to relight it. Every animated component early-returns under reduced motion, which means the server-rendered state is already the finished state. The site is statically prerendered end to end, so a crawler — or a visitor with JavaScript disabled — gets the complete argument with none of the choreography.

The result

EcoRig now has a site that argues its own case: a onepager plus two founder profiles, no CMS, no forms, one conversion path to a scheduled call, and every claim on it carrying a nameplate code. The full rebuild — some 5,900 lines across 94 files, on Next.js 16 with Turbopack, Tailwind CSS 4, GSAP and React Three Fiber — landed in a single day, replacing a stock-video landing page with a piece of work that looks like the engineering it's selling.

The published numbers are stated as what they are: design targets and standing commitments — under 60 seconds from idle to full load, consumption entirely from renewable surplus, 24/7 remote monitoring, and a pledge of up to 10% of annual profits to local causes — with operating KPIs held for partners under agreement. That restraint is deliberate. A company selling grid reliability to energy professionals cannot afford a marketing page that overstates its own instrumentation.