EcoRig — WebGL-üheleheline, mis müüb piiratud energiat arvutusvõimsusena

EcoRig Technologies müüb elektrit, millel ei lastud kunagi tekkida. Kui tuulepark toodab rohkem, kui võrk vastu võtta suudab, siis ülejääk piiratakse — puhas energia, mis oli rahastatud, ehitatud ja valmis voolama, aga mida siis meelega ei toodetud. EcoRig paigutab neisse asukohtadesse konteinerisse pakitud, võrguga suhtlevad arvutusseadmed, neelab ülejäägi arvesti taga ära ja muudab selle odavaks, väikese süsinikujäljega arvutuseks. Ehitasime nende turunduslehe ümber selle ühe idee ümber: kerimisega seotud WebGL-osakestesüsteem, mis teisendab tuuliku välgunooleks ja välgunoole arvutuskiibiks, sisukihi peal, mis on projekteeritud AI-assistentide poolt tsiteeritud saama.

Probleem

Piiramine on kallis ja nähtamatu probleem. Euroopa raiskab sellele igal aastal teravatt-tunde puhast elektrit ja need, kes seda kõige rohkem tunnevad — tuule- ja päikeseenergia tootjad, kes vaatavad, kuidas tulu välja lülitatakse — ei tea tihti isegi kategooria nime, mis selle ära lahendab. „Paindlik koormus“ ei ole fraas, mida keegi otsingukasti kirjutab. Ega ka „energiast arvutuseks“.

Seega peab leht õpetama, enne kui ta müüa saab. Ta peab selgitama võrgukontseptsiooni energeetikaprofessionaalile ilma teda alahindamata, esitama ärilise argumendi finantsjuhile ja elama üle tõsiasja, et tema kõige tõenäolisem esmamulje ei ole üldse avaleht — see on AI-assistent, kes võtab ettevõtte kolme lausega kokku kellelegi, kes küsis, mida piiramisega peale hakata.

Eelmine leht ei teinud sellest midagi. See oli pädev, aga anonüümne maandumisleht: framer-motion, CSS Modules, üldised sektsioonipealkirjad — We Offer, Our Mission, Our Team — ja üleekraanne stokkvideo tuulepargist, mida voogedastati kolmanda osapoole CDN-ist. See ei öelnud midagi, mida sada teist energiatehnoloogia idufirmat samuti ei öelnud, ja ei andnud roomajale midagi konkreetset, mida tsiteerida.

Mida me ehitasime

Kangelaspilt ongi argument

Avaleht jooksutab ühte THREE.Points süsteemi 20 000 osakesega, mis räägib kerimise käigus ära kogu ärimudeli: tuulik (tootmine) teiseneb välgunooleks (ülejääk — ja EcoRigi brändimärk) ning siis arvutuskiibiks (toode). Kolm kuju, üks geomeetria: alternatiivsed vormid sõidavad kaasa eritellimusel puhvriatribuutidena ja interpoleeritakse käsitsi kirjutatud GLSL-i tipuvarjundis, nii et teisendus on GPU operatsioon, mitte iga kaadri kohta tehtav protsessori ümberehitus.

Detailid on see koht, kus asi lakkab olemast valmiseffekt. Välgunool ei ole logo lähendus — see on logo, valimitud otse SVG teekonnalt, kusjuures veerand osakestest on tõmmatud mööda perimeetrit terava kontuuri jaoks ja ülejäänud pakitud sisemusse tagasilükkamismeetodil paaris-paaritu kiiretesti vastu. Iga osakese asukoht tuleb deterministlikust räsist, mitte Math.random()-ist, nii et stseen on igal uuesti laadimisel ja igas masinas identne. GSAP ja ScrollTrigger kirjutavad kerimise edenemise tavalisse muudetavasse objekti, mida renderdustsükkel loeb, mis hoiab Reacti animatsiooniteest täiesti eemal — ei olekut, ei taasrenderdamisi, kuuskümmend kaadrit sekundis. Kerimise kaardistus sisaldab meelega hoidepause: välgunool lukustub ja jääb loetavaks terveks viiendikuks lehest, ankurdatuna meelega tühja sektsiooni külge, nii et brändimärk saab hetke maandumiseks, selle asemel et järgmise kuju poole minnes mööda vilksatada.

See taandub ausalt. WebGL-i võimekuse sond jookseb enne stseeni dünaamilist importi, nii et three.js ei satu kunagi algsesse pakendisse, ja fikseeritud taust — süsinikpind, voldi gradiendid, maamõõtja koordinaatvõrk — renderdub igal juhul. prefers-reduced-motion all joonistab stseen täpselt ühe valmis kaadri ja jääb seisma.

Mõõteriistade paneel, mitte maandumisleht

Disainisüsteem „Substation“ võtab oma keele elektrotehnikast: insenerimillimeeterpaber, süsinikööne ja voldi-laimi aktsent, koos faasitud nimeplaatide, plaadijälgede ja teemantkujuliste ühenduspadjadega ning lainekuju tekstuuridega. Kirjatüüp on jaotatud kolmeks hääleks — Unbounded väljapaneku jaoks, Manrope lugemiseks, JetBrains Mono kõige jaoks, mis käitub nagu mõõteriist.

See sõnavara ulatub kogu tee sisumudelini välja. Iga väide lehel kannab nimeplaadi koodi — kaheksa tootjakasu on CUR-01 kuni INN-08, protsessietapid ST-01 kuni ST-04 — salvestatud masinandmetena ja seotud tekstiga võtme kaudu, nii et turundusleht loeb nagu riistvaratüki spetsifikatsioon. Navigatsioon kannab elavat võrgusageduse näitu, mis käib juhuslikult 49,96 ja 50,04 Hz vahel, kirjutatud otse DOM-i intervalliga ilma taasrenderdamiseta. Menüü on „jaotuskilp“. 404 ütleb ERR 404 — CIRCUIT OPEN. Jalus kirjutab alla: No clean electron left behind.

Süsteemi hoiab koos ka välistamine. Projekti enda juhend loetleb keelatud motiivid — pillikujulised märgid, kaared, vedelikuga täituvad hõljumisefektid, punktivõrgud, sulgornamendid — sest kiireim viis eristuva süsteemi lagunemiseks on üks üldine komponent korraga.

Üheliiniskeem

Protsessiosa on sisemine SVG üheliiniskeem elektrotehnilises mõttes: tuulik, konteinerisse pakitud seade, arvutuskiip ja võrgumast, ühendatud jaotussiini jälgedega. Lauaarvutis kinnitub osa ekraanile ja jäljed joonistavad end mööda oma teepikkust, kui sa sellest läbi kerid; mobiilis mängib see sisenemisel korra; liikumise vähendamise all tuleb see kohe tagasi, täielikult valgustatuna. See on ainus koht, kus energiaostja näeb pakkumist joonistatuna tähistuses, mida ta tööl niikuinii loeb.

Projekteeritud tsiteeritavaks

GEO-kiht on see osa, mis loeb siis, kui esmamulje on AI vastus, mitte leht. Leht avaldab nii kompaktse llms.txt-i kui laiendatud llms-full.txt-i ja — mis on oluline — mõlemad genereeritakse samadest sõnumiobjektidest ja kataloogikonstantidest, mis lehte renderdavad, nii et assistendile loetav versioon ei saa turundustekstist lahku triivida nii, nagu käsitsi hooldatav fail alati lõpuks teeb. robots.txt nimetab AI-roomajad otsesõnu, nende seas GPTBot, ClaudeBot ja PerplexityBot, ning JSON-LD graaf ristviitab Organization, WebSite, WebPage, FAQPage ja Person sõlmed stabiilsete ID-de kaudu. EcoRig on tüübitud tavalise Organization-ina, mitte LocalBusiness-ina — pole ruume ega lahtiolekuaegu, mida avaldada — koos knowsAbout massiiviga, mis nimetab piiramist, tarbimise juhtimist, võrgu tasakaalustamist ja rohelist arvutust, nii et mudelil on selge alus ettevõtte sidumiseks nende mõistetega, mille peale teda leida tuleks.

KKK on natiivne <details>/<summary>: null kliendipoolset JavaScripti, täielikult roomatav ja peegeldatud sõna-sõnalt FAQPage skeemi, nii et see, mida roomajale öeldakse, ja see, mida külastaja lugeda saab, on samad sõnad.

Üks parandus avaldamisele järgnenud nädalast illustreerib hästi, kui konkreetseks see töö läheb. Meeskonnaportreed olid lehe ainsad rasterpildid, nii et Google hakkas otsingutulemustes brändi pisipildina joonistama ühe asutaja nägu. Parandus oli X-Robots-Tag: noindex portreede kataloogil ja Nexti pildioptimeerija marsruudil — päis, mitte robots.txt-i blokk, sest roomajal peab olema lubatud fail alla laadida, et ta üldse näeks juhist, mis ütleb tal seda mitte indekseerida — pluss korralik 1200×1200 brändiplaat, mis on ühendatud Organization ja WebPage skeemi selle pildina, mida ta kasutama peaks.

Üks keel, kolme keele arhitektuur

Leht tarnitakse ainult inglise keeles. Sellegipoolest on see ehitatud täieliku next-intl marsruutimise selgroo peale — keele kaupa piiritletud marsruudid, tüübitud teekonnakaart, alternatiivid, mis hakkavad hreflangi ja x-default-i automaatselt väljastama hetkel, mil teine keel ilmub — ja kõik kolm fonti valiti ja laaditi nii, et kirillitsa ja laiendatud ladina alamhulgad on juba paigas. Eesti ja vene keele hiljem lisamine tähendab massiivi laiendamist ja sõnumikausta lisamist, mitte rakenduse ümberstruktureerimist. Selgroo ehitamine esimesel päeval maksab ühe pärastlõuna; selle tagantjärele lisamine pärast avaldamist maksab ümberkirjutuse.

Liikumine, mis kunagi sisu ei peida

Kogu ehitust juhib üks muutumatu reegel: päris tekst ja päris numbrid on alati animatsiooni all serveri poolel renderdatud HTML-is. Pealkirjade tükeldamine toimub pärast hüdratsiooni, loendurid renderdavad serveris oma lõppväärtuse ja kordavad ainult kliendis nullist, protsessiskeem tarnitakse täielikult valgustatuna ja JavaScript tuhmistab selle selleks, et seda uuesti süüdata. Iga animeeritud komponent tuleb liikumise vähendamise all kohe tagasi, mis tähendab, et serveri poolel renderdatud olek ongi juba lõppolek. Leht on algusest lõpuni staatiliselt eelrenderdatud, nii et roomaja — või külastaja, kellel JavaScript välja lülitatud — saab täieliku argumendi ilma ühegi koreograafiata.

Tulemus

EcoRigil on nüüd leht, mis esitab ise oma argumendi: üheleheline pluss kaks asutajaprofiili, ilma CMS-ita, ilma vormideta, üks konversiooniteekond broneeritud kõneni ja iga väide sellel kannab nimeplaadi koodi. Täielik ümberehitus — umbes 5900 rida 94 failis, Next.js 16 peal Turbopackiga, Tailwind CSS 4, GSAP ja React Three Fiber — maandus ühe päevaga, asendades stokkvideoga maandumislehe tööga, mis näeb välja nagu see inseneeria, mida ta müüb.

Avaldatud numbrid on välja öeldud sellena, mis nad on: disainisihid ja püsivad kohustused — alla 60 sekundi jõudeolekust täiskoormuseni, tarbimine täielikult taastuvenergia ülejäägist, ööpäevaringne kaugseire ja lubadus anda kuni 10% aastakasumist kohalikele algatustele — kusjuures tegevusnäitajad hoitakse partneritele kokkuleppe alusel. See tagasihoidlikkus on meelega. Ettevõte, kes müüb võrgu töökindlust energeetikaprofessionaalidele, ei saa endale lubada turunduslehte, mis oma mõõteriistu üle pakub.