Produktside (konsept)
Galaxy S26 Ultra
En scrollstyrt produktside for Galaxy S26 Ultra med 3D i sanntid. Telefonen roterer, S Pen glir ut, og telefonen sprer seg ut i alle fargene.
- Next.js
- React Three Fiber
- Three.js
- GSAP
- TypeScript
- WebXR
Om prosjektet
Hva jeg laget og hvordan.
Jeg liker produktsidene til Samsung, så jeg lagde min egen versjon. Én 3D-modell av telefonen bærer hele siden: den beveger seg, roterer og går fra hverandre mens du scroller. Hver seksjon har sin egen 3D- eller animerte demo.
Jeg la mye arbeid i ytelsen. Modellene er komprimert med Draco, scenen tegnes bare når noe beveger seg, og alle 3D-seksjonene etter hero-delen deler ett WebGL-canvas. Siden får 100 i tilgjengelighet og SEO på Lighthouse.
Et fanlaget konsept, ikke tilknyttet Samsung. Spesifikasjonene er hentet fra Samsungs offisielle produktsider.
Høydepunkter
- 01
Sammenligning med S25 Ultra
Begge telefonene side om side i 3D i riktig størrelsesforhold, med en spesifikasjonstabell ved siden av.
- 02
Bygg din Ultra
Velg farge og lagring, så oppdateres prisen med en gang. Med AR kan du plassere fargen du valgte i rommet ditt i full størrelse.
- 03
Galaxy AI-demoer
Live Translate, Circle to Search og Photo Assist spilles av som korte animerte historier.
- 04
Kamera
Space Zoom fra 0.6x til 100x som du scroller deg gjennom, og en sammenligning av nattbilder med en før/etter-slider du kan dra i.
- 05
Dra for å snurre
Ta tak i telefonen og snurr den. Den spinner litt videre og glir mykt tilbake på plass.
- 06
Se filmen
Én knapp gjør hele siden om til en tur som scroller av seg selv, og du kan pause og fortsette.
Bilder
