Ham ürün görüntülerini sinematik bir kaydırma deneyimine dönüştürmek.

Ham görüntüyü bir hikayeye dönüştürmek.

Elimizde stüdyoda çekilmiş ve mühendislik amaçlı hazırlanmış patlatılmış görünüm (exploded view) görüntüleri vardı. Bu görüntüler ürünün parçalarını doğru şekilde gösteriyordu, ancak kendi başına bir lansman deneyimi değildi.

Hedefimiz bu ham görüntüyü, ziyaretçinin sayfayı kaydırdıkça ürünün parça parça açıldığını hissettiği, yüksek dönüşüm odaklı ve premium bir ses markasına yakışan bir lansman sayfasına dönüştürmekti.

Kaydırmayı zaman çizelgesi olarak kullandık.

Sayfanın omurgası kare kare oynatılan bir canvas dizisi. Kullanıcı ne kadar kaydırırsa, ürün animasyonu o kadar ilerliyor — video oynatma kontrolü tamamen scroll pozisyonuna bağlı.

Bu "ölçüm rayı" motifini hem bir ilerleme göstergesi hem de bir anlatım aracı olarak kullandık: sayfa boyunca dB, frekans aralığı ve pil ömrü gibi ölçüm birimleri arasında geçiş yaparak ürünün teknik kimliğini görsel bir ritme dönüştürdük.

Fırçalanmış titanyum ve saf siyahtan oluşan görsel kimlik, sayfanın her bölümünde tutarlı kaldı — malzeme hissi, ürünün kendisi kadar önemliydi.

60fps'de çalışan, bağımlılığı düşük bir deneyim.

Ortaya çıkan site kendi kendine yeten, dış kütüphanelere minimum düzeyde bağımlı bir kaydırma deneyimi. Masaüstünde 60fps'de akıcı çalışırken, mobil cihazlar için optimize edilmiş ayrı kare setleri kullanılıyor.

Erişilebilirlik gözetilerek "reduced motion" tercihine tam destek eklendi — bu tercihi etkinleştiren kullanıcılar için animasyon yerini daha sakin bir statik deneyime bırakıyor.

Sade bir teknik yığın, özenli bir uygulama.

Karmaşık bir framework yerine, tarayıcının kendi yeteneklerine dayanan hafif bir yaklaşım tercih ettik.

Deneyimi izleyin.

Aşağıdaki kayıt, kaydırma ile kontrol edilen etkileşimi gösteriyor. Oynatmak için kapak görselinin üzerine tıklayın.