Akıllı telefon lansman sitesi

Cilalı alüminyum gövdeli, kamera kadranlı bir akıllı telefonun lansman sitesi: telefon karanlık sahnede ışığı yakalayarak döner, kadran çevrildikçe fotoğraf yeniden kadrajlanır, seçilen renk bütün sayfayı boyar, ön sipariş tek ekranda biter.

Tüm projeler

Kimin ihtiyacı

Yeni bir telefon markası, büyük markaların yanında ancak ürününün karakteriyle fark edilir. Lansman sitesinin işi özellik saymak değil, telefonu elde tutma hissini ekrana taşımak: gövdeyi ışığın altında göstermek, imza özelliği ziyaretçinin kendi eliyle denetmek ve merak ettiği anda onu ön siparişe götürmek. Bunu yaparken sayfa her cihazda hızlı açılmalı ve herkes tarafından kullanılabilmeli.

Ne kurdum

Marl 1'in lansman sitesini telefonun kendisinden türettim. Koyu sahne cilalı gövdenin yansımalarını ve rengin derinliğini taşıyor, kamera halkasının çentikleri sayfanın ölçeği ve gezinmesi oldu. Telefon sayfadaki tek 3D nesne: kaydırdıkça döner, kenar profilini gösterir, gövdesinde bir ışık süpürmesi gezer. İmza anda ziyaretçi kadranı kendisi çevirir; tam ekran fotoğraf her çentikte 13 mm'den 120 mm'ye doğru yeniden kadrajlanır, dev odak uzaklığı sayısı onunla atlar. Ekran bölümünde güneşi artırıp ekranı dener, pil bölümünde kendi gününü seçer. Renk seçildiğinde renk kadrandan taşıp bütün sayfayı boyar; ön sipariş renk ve hafızayla tek ekranda tamamlanır, ücret telefon kargoya çıktığında alınır.

Akış

Ziyaretçi sayfayı açar; karanlıkta bir kenar ışığı telefonu çizer, telefon kenarından dönerek arka yüzünü gösterir.
Kadranı çevirir; tam ekran fotoğraf her çentikte 13 mm'den 120 mm'ye doğru yeniden kadrajlanır.
Kamerayı, ekranı ve pili kendisi dener: karelerin ayarlarını görür, güneşi artırır, gününü seçer.
Rengini seçer; renk kadrandan taşıp bütün sayfayı boyar.
Hafızayı seçip ön siparişi verir; kartı kaydedilir, ücret telefon kargoya çıkınca alınır.

Önemli kararlar

Sayfa telefondan türüyor
Koyu sahne cilalı gövdenin ışığını taşıyor; sayfanın tek rengi seçili telefon rengi. Sağ kenardaki ray kadranın çentiklerinden, dev sıkıştırılmış başlıklar Mona Sans'tan, ölçüler Azeret Mono'dan geliyor. Renk seçildiğinde View Transitions API ile kadranın konumundan büyüyen bir daire bütün sayfayı yeni renge boyuyor.
Telefon kodla modellendi, her açıdan net
Gövde ve kadran Three.js'te geometriyle kuruldu, cilalı anodize metal TSL ile yazıldı; indirilecek model dosyası yok, her renk tek bir parametre. WebGPU çizici WebGL 2 yedeğiyle çalışıyor; ilk ekran hazır bir posterle açılıyor, 3D sahne görünür olduğunda başlıyor.
Kadran herkes için çalışıyor
Fareyle sürükleniyor, kaydırmayla dönüyor, klavyede ok tuşlarıyla çentik çentik ilerliyor; ekran okuyucu onu "50 mm" diye okunan bir kaydırıcı olarak görüyor. Hareketi azaltmayı seçen ziyaretçi aynı hikâyeyi durağan karelerle okuyor, renk dalgası anında geçişe dönüyor; her renk zemininde metin kontrastı AA, bütün özellik metinleri taranabilir HTML.
Ön sipariş tek ekranda
Sayfa Astro ile statik; yalnızca 3D sahne, kadran ve yapılandırıcı etkileşimli. Stripe Checkout'un kurulum modu kartı kaydediyor, ücret kargo günü alınıyor; rezervasyonlar Cloudflare Worker ve D1 üzerinde tutuluyor.