Nevamarine er en norsk produsent av undervannslys til havbruksnæringen. Under overskriften «Light plays a vital role in aquaculture» skulle nettstedet ikke bare liste produkter, men få besøkende til å føle hvordan lyset lever under vann. Løsningen ble en scroll-drevet 3D-fortelling der hvert produkt trer fram som et interaktivt objekt.
Immersiv produktopplevelse
Produktporteføljen – AquaSolar, Aqua Control og Aqua Backup – presenteres hver for seg med sin egen 3D-scene. På produktsidene kan besøkende ta på selve lampen: en Light-bryter skrur LED-ringene av og på, og en Depth-slider senker lampen ned i vannet og endrer hvordan lyset brytes og spres. Alt skjer i sanntid i nettleseren, uten sidelast, slik at produktet oppleves som et fysisk objekt man kan utforske.
Redaksjonelt innhold
Nevamarine Stories er en redaksjonell logg med bransjenyheter og produktstoff, drevet av Sanity CMS. Artikler, produktbeskrivelser og teammedlemmer redigeres av kunden selv og hentes inn via et eget API-lag i Next.js – slik at markedsavdelingen kan holde innholdet levende uten å røre koden.
Teknisk løsning
Siden er bygget med Next.js 15 og React Three Fiber. Hvert produkt har en dedikert 3D-scene der lampen rendres direkte i nettleseren med Three.js, HDR-belysning og postprocessing-effekter. Brukeren kan interagere med scenen — skru lyset av og på og justere dybde — uten at siden laster på nytt.
Scroll-drevet animasjon er implementert med GSAP og koordinerer kameraet i 3D-scenen med innhold som glir inn langs y-aksen. Redaksjonelt innhold — artikler, produktbeskrivelser og teammedlemmer — hentes fra Sanity CMS via et eget API-lag i Next.js.
Stack
Next.js 15 · React Three Fiber · Three.js · @react-three/postprocessing · GSAP · Framer Motion · Sanity CMS · Tailwind CSS · TypeScript
