Miten tämä sivusto tehtiin.

Konsepti: Yövuoro

Auto2B:n logo on vuori, ja palvelulupaus on ympärivuorokautisuus: järjestelmä valvoo, kun yritys nukkuu. Sivuston konsepti syntyi tästä — arktinen yö, jossa revontulet ovat tekoälyn älykerros ja putoavat valot ovat yhteydenottoja: puheluita, sähköposteja, liidejä.

Tarina kulkee scrollin mukana: ensin signaalit putoavat ja kuolevat oranssina hiilloksena (menetetyt liidit), sitten Auto2B kytkeytyy ja samat signaalit järjestyvät virraksi, joka kulkee vuorenharjaa pitkin kohti huippua — varattua tapaamista.

Visuaalinen järjestelmä

Väripaletti on rakennettu Auto2B:n brändin ympärille: syvä musta, keskiyön sininen, sähkönsininen (#2563EB) ja jäänvalkoinen — laajennettuna revontulten teal-vihreällä ja menetettyjen liidien amber-oranssilla, jota käytetään vain tarinan 'vuoto'-vaiheessa.

Typografia: Fraunces-antiikva otsikoissa (editoriaalinen, kallis tuntuma — kunnianosoitus alkuperäisen sivuston serif-identiteetille), Instrument Sans leipätekstissä ja IBM Plex Mono datassa, aikaleimoissa ja järjestelmäteksteissä.

WebGL-yötaivas

Etusivun tausta on yksi koko ruudun GLSL-shader: proseduraalinen vuorenharja (fbm-kohina + taattu huippu), revontuliverhot, tähdet ja laaksousva — yksi piirtokutsu, ei tekstuureja.

Signaalipartikkelit ovat erillinen pistejärjestelmä, jonka käyttäytyminen lasketaan vertex-shaderissa: sama harjafunktio jaetaan molempien shaderien kesken, joten partikkelit 'tietävät' missä vuori on. Scrollin ohjaama uOrder-uniformi liu'uttaa jokaisen partikkelin putoavasta radasta harjaa pitkin kulkevaan virtaan.

GSAP ScrollTrigger välittää tarinan vaiheet (vuoto, käänne, huippu) render-looppiin ilman React-uudelleenrenderöintejä. Lenis hoitaa pehmeän scrollin.

Tekoälyllä tuotetut assetit

Revontulimaisema (OG-kuva, alasivujen tausta ja reduced-motion-fallback) generoitiin Higgsfieldin GPT Image 2:lla tarkalla väripaletti-promptilla, jotta se istuu shader-maailmaan saumattomasti.

Tekoälyvastaanottajan ääninäyte — 'Auto2B:n tekoälyvastaanottaja, kuinka voin auttaa?' — generoitiin Higgsfieldin Seed Audio -mallilla suomenkielisellä ääniohjeistuksella. Ääni soi vain käyttäjän omasta napautuksesta, ja aaltomuoto piirretään reaaliajassa WebAudio AnalyserNodella.

Interaktiiviset todisteet

Liidin matka -konsoli simuloi järjestelmän logiikan vaihe vaiheelta (vastaanotto → analyysi → varaus → yhteenveto) kolmella kanavalla. Se on merkitty selkeästi simulaatioksi — sisältö räätälöidään asiakkaan mukaan.

ROI-laskuri käyttää samaa laskukaavaa kuin Auto2B:n alkuperäinen sivusto: menetetyt yhteydenotot × konversio × keskikaupan arvo. Kaikki hinnat ja tilastot ovat suoraan auto2b.fi:ltä lähteineen.

Tekninen toteutus

Next.js 16 (App Router) + TypeScript, staattinen export. React Three Fiber WebGL-osuudessa, GSAP + ScrollTrigger motion-järjestelmässä, CSS Modules -tyylit design-tokenien päällä.

Saavutettavuus: prefers-reduced-motion korvaa koko WebGL-maailman staattisella kuvalla ja sammuttaa animaatiot, koko sivusto toimii näppäimistöllä, ja audio vaatii aina käyttäjän toiminnon.

Suorituskyky: partikkelibudjetti ja DPR-katto skaalautuvat laitteen mukaan, kuvat on optimoitu, fontit ladataan next/font-järjestelmällä ja sivusto toimitetaan staattisina tiedostoina Netlifystä.