Sitenize hangi hissi istiyorsunuz? Deneyin, numarasıyla söyleyin.
Bu sayfadaki her efekt canlı — dokunun, üzerine gelin, kaydırın. Dünyanın ödüllü sitelerinden derlenen desenlerin bizim atölyede yeniden kurulmuş halleri.
Üzerine gelin — hızlanır. Nerede: duyuru bantları, kampanyalar.
E07Film greni dokusuNoomo XR
Basılı poster hissi
Canlı üretilen grain, düz renkleri "matbaadan çıkmış" gösterir. Nerede: premium/retro markalar.
E08Telemetri HUDMammut Baikal
ATÖLYE SAATİ: --:--:--
KAZAN SICAKLIĞI: 42.0°C
KARIŞTIRICI: 1.450 rpm
VİSKOZİTE: 3.200 cP · SOFT BODY
SAYFADAKİ KONUMUNUZ: 0%
İMLEÇ: X:— Y:—
Ne işe yarar: sayfayı canlı bir cihaz/laboratuvar gibi hissettiren SÜS verisi. Mammut bunu dağcının GPS'i ve nabzıyla yaptı — okuyucu kendini dağda sandı. Biz kazan sıcaklığıyla yaparız: ziyaretçi kendini atölyede sanır. Rakamların bir kısmı gerçek (saat, sizin kaydırmanız, imleciniz), bir kısmı atmosfer. Nerede: üretim/lab konseptli sayfalar.
E09Animasyonlu sayaçlarNoomo · Synchronized
0
Renk
0
Ürün
0
Marka
0
Kuruluş
Nerede: istatistik blokları, "rakamlarla biz".
E10Harf yuvarlanan linklerChungi Yoo
Üzerine gelin — harfler tek tek takla atar. Nerede: menüler, önemli linkler.
E11Rollover aksiyon kartıAwwwards
Metalik Altın
Gül Kurusu
Ultramarin
Üzerine gelin. Nerede: ürün/koleksiyon ızgaraları — mağazanın standardı olmalı.
E12Kinetik tekrar tipografiSynchronized Studio
MARKA KURULUM — MARKA KURULUM — MARKA KURULUM — MARKA KURULUM
Tutup sürükleyin. Nerede: moodboard/kartela oyun alanları, lansman sayfaları.
E15Bulanıktan netleşmeMammut Baikal
Sis dağılır, mesaj kalır.
Nerede: bölüm girişleri, duygusal vurgu anları.
E1612fps "el çizimi" ritmiPrometheus Fuels
60 fps — dijital
basamaklı — el çizimi hissi
Aynı animasyon, iki ritim. Basamaklı olan "canlı çizilmiş" hisseder — Yılın Sitesi 2021'in sırrıydı.
E17Dairesel maske geçişiMANA Yerba Maté
Tıklayın — yeni dünya damla gibi açılsın
Renk değişti, evren değişti.
Nerede: renk/seri değiştirme anları, tema geçişleri.
E18Formül modalıNoomo XR
Teknik içeriği "bar menüsü" zarafetiyle sunar. Nerede: ürün içerik/özellik detayları.
E19Boşluk doldurmalı formNoomo XR
Merhaba! Ben , markasını büyütmek istiyorum. Bana adresinden ulaşabilirsiniz.
Form doldurmak angarya değil, cümle kurmak. Nerede: iletişim/başvuru sayfaları.
E20Dönen damga rozetiCrescente Sicily
Üzerine gelin — hızlanır. Nerede: köşe rozetleri, "onay damgası" alanları.
E22Hover ses dokunuşlarıKPR / Resn
Sağ üstten sesi açın, sonra bu sayfadaki kartların/düğmelerin üzerinde gezinin — her temas minik bir tık sesi verir. Ses varsayılan olarak kapalıdır; kullanıcı isterse açar.
Nerede: premium/immersive deneyimler. Ölçülü kullanılırsa siteyi "dokunulur" yapar.
WebGL Lab
Karmaşık sınıf: tarayıcıda gerçek zamanlı grafik
Buradakiler video değil — grafik kartınızda o an hesaplanıyor. Ödüllü sitelerin "vaov" dediği katman bu. Her demo dokunmanıza tepki verir.
Görünmez bir rüzgâr haritası parçacıkları sürüklüyor; izleri boyaya dönüşüyor. Nerede: canlı fonlar, 404'ler.
E30Cam küre içinde boyaLusion — cam/jel malzeme
Gerçek zamanlı cam: ışığı kırar, arkasındakini büker · imleç döndürür
İçinde renkli damlalar yüzen, ışığı gerçekten kıran cam küre. Nerede: premium ürün sunumları (FarbeLab).
E31Canlı boya damlasıLusion — deforme blob
İmleci yaklaştırın — damla size doğru kabarır
Yüzeyi sürekli dalgalanan, dokununca şekil değiştiren 3D organizma. Nerede: hero merkez objesi, maskot.
E32Kumaş fiziği — asılı etiketLusion v2 — kumaş simülasyonu
İmleci kumaşın üzerinde gezdirin — gerçek fizikle savrulur
442 noktalı gerçek kumaş simülasyonu: yerçekimi, rüzgâr ve dokunuş. Nerede: etiket/bayrak sahneleri, lansmanlar.
E33Tablo morph geçişiAwwwards hover klasiği
İmleci üzerine getirin — bir tablo diğerine mürekkep gibi dönüşür
İki görsel, gürültü haritasıyla birbirinin içine akıyor. Nerede: galeri hover'ları, koleksiyon geçişleri.
Ustalık sınıfı
En üst lig: fizik, ışık ve yarım milyon parçacık
Buradan sonrası ajans değil, stüdyo işi. Her demo grafik kartını gerçekten çalıştırıyor — sahneler ekrana yaklaşınca doğar, uzaklaşınca kaynağı serbest bırakır.
Tıklayın — marka adı patlar, parçalar yerçekimiyle düşer
Yazı binlerce küpe dönüşüp fizikle savruluyor, sonra kendini toparlıyor. Nerede: lansman anları, 404.
E4310.000 şişelik depoinstancing
On bin nesne, tek çizim emri — kaydırın, depo dönsün
Aynı nesnenin on bin kopyası tek seferde çiziliyor. Nerede: kapasite/ölçek anlatımı, "dev fabrika" hissi.
E44Volumetrik boya bulutuhacim ışıması
İçinden ışık geçen üç boyutlu mürekkep bulutu · imleç bulutu iter
Yüzey değil hacim: ışın buluttan geçerken adım adım ışık topluyor. En pahalı, en sinematik teknik.
Arka plan atmosferleri
İçeriğin arkasında yaşayan yüzeyler
Bunlar gösteri değil, zemin: yazının arkasında durur, sayfaya karakter verir, okumayı bozmaz. Her demoda üstte örnek metin var — gerçekte nasıl duracağını görün.
E45Dijital ebruTürk kâğıt ebrusu · bize özel
Ebru
Damlalar suya düşer, tarak geçer, desen doğar.
Tıklayın — yeni damla düşsün
Gerçek ebru matematiği: her damla, altındaki tüm deseni halka halka iter; tarak sinüs dalgasıyla tarar. Dünyada kimsede yok — bizim kültürümüzden çıkma imza efekt.
Voronoi hücreleriyle üretilen kuru boya/eskime dokusu. Nerede: vintage seriler, restorasyon anlatıları.
E49Renk sisi (aurora)sakin zemin
Sakin zemin
Okumayı bozmadan renk taşıyan yüzey.
Yavaşça akan renk katmanları — metin altında en güvenli seçenek
Yumuşak, düşük kontrastlı akış. Nerede: uzun metinli bölümler, iletişim sayfaları, hero altı.
E50Kendiliğinden büyüyen desenreaksiyon-difüzyon
Canlı desen
Kimya gibi büyüyen organik doku.
Tıklayıp sürükleyin — desen oradan üremeye başlar
İki kimyasalın yayılıp tepkimeye girmesi (Gray-Scott). Zebra deseni, mercan, boya lekesi — hepsi aynı denklemden.
Lig 0 — ustalık üstü
Web'de nadiren görülenler
Buradakiler "efekt" değil, simülasyon. Gerçek fizik ve gerçek optik denklemleri tarayıcıda, kare kare çözülüyor. Bir tanesi boya sanayisinin yüz yıllık renk denklemi — dünyada web sitesinde çalışan başka örneğini bulamazsınız.
E51Gerçek pigment karışımıKubelka-Munk · imza
Sürükleyerek boya bırakın — solda ekran mantığı, sağda gerçek boya
Ekranda mavi + sarı = gri. Paletde mavi + sarı = yeşil. Fark, ışığın pigment tanesi içinde soğurulup saçılmasından gelir; boya sanayisi bunu 1931'den beri Kubelka-Munk denklemiyle hesaplar. Sağ yarıda o denklem çalışıyor. Boya markası için bundan daha doğru bir imza efekt yok.
E52Islak suluboyasığ su + pigment tortusu
Sürükleyerek boyayın — su yayılır, pigment kenarda toplanır
Suluboyanın imzası olan koyu kenar halkası burada çizilmiyor — su buharlaşırken pigmentin kenara sürüklenip orada tutunmasından kendiliğinden oluşuyor. Kâğıdın dokusu da hesaba katılıyor: pigment çukurlarda toplanıyor (granülasyon).
E53Işık yolu izlemegerçek global aydınlatma
Bekleyin — gürültü çözülüp fotoğraf olsun · sürükleyin, kamera dönsün
Her pikselden sahneye ışın atılıyor, ışınlar yüzeylerden sekerek ışığa ulaşmaya çalışıyor. Kırmızı duvarın yanındaki beyaz küre kendiliğinden kırmızıya çalıyor — bu boyanmadı, ışığın gerçekten oradan sekmesiyle oldu. Sinema efektlerinde kullanılan yöntemin tarayıcıda çalışanı.
E54Gerçek fırçakıl kıl fizik
Sürükleyerek boyayın — 420 kıl ayrı ayrı bükülüyor
Fırça izi bir "damga" değil. 420 kılın her biri ayrı bir yay gibi davranıyor: bastırınca yayılıyor, çevirince geride kalıyor, kalkınca toparlanıyor. İz, kılların kâğıda değdiği yerden çıkıyor — o yüzden hiçbir darbe diğerine benzemiyor.
E55Kaustik — cam kavanozdan geçen ışıkışık odaklanması
İmleci gezdirin — ışık kaynağı sizi takip etsin
Su dolu bir kavanozun zemine düşürdüğü o titrek parlak ağ. Işık, sıvı yüzeyinde kırılıp bazı noktalarda toplanıyor; parlaklık o yoğunlaşmadan doğuyor. Her kare için yüzeyin eğimi hesaplanıyor.
Akışkan simülasyonuna engel tanımlandı: harfler. Boya onlara çarpıyor, kenarından dolanıyor, arkalarında girdap bırakıyor. Marka adınız sahnenin dekoru değil, fiziğin parçası oluyor.
Lig 0 · ikinci dalga
Madde ve ışık
Öncekiler hareketi taklit ediyordu; bunlar maddenin kendisini. Boyanın kalınlığı, pigmentin dalga boyu, camın ışığı ayrıştırması, kristalin büyümesi. Baştaki demo bir boya üreticisinin en pahalı sorununu ekranda çözüyor.
E57Metamerizm — ışığa göre değişen renkCIE renk bilimi · imza
İki boya gün ışığında birebir aynı (ΔE = 0.0). Ampule geçince ayrılıyorlar, floresanda fark ΔE = 19'a çıkıyor — yani bariz. Sektörün adı var: metamerik uyumsuzluk — "mağazada tuttu, evde tutmadı" şikâyetinin sebebi. Burada gerçek CIE renk eşleme fonksiyonları ve gerçek ışık kaynağı tayfları kullanılıyor; iki pigmentin yansıma eğrisi, gün ışığı altında aynı üç uyarımı verecek şekilde çözülerek üretildi.
E58Impasto — boyanın kalınlığıyükseklik alanı + ışık
Sürükleyerek boyayın — ışık kabartmanın üstünde geziniyor
Boya burada renk değil, hacim. Her darbe bir yükseklik bırakıyor; ışık o yüzeyin eğimine göre kırılıyor, spatula kenarında sırt oluşuyor. Yağlı boya tablosunun yandan bakınca görünen kabartması.
E59Sıvı damlacıklarparçacık akışkanı + yüzey gerilimi
Izgara üzerinde değil, 780 ayrı parçacık üzerinde çözülen sıvı. Her parçacık komşularının yoğunluğunu ölçüp itiyor/çekiyor; yüzey gerilimi bundan doğuyor. Damlalar gerçekten birleşiyor ve kopuyor — çizilmiyor.
E60Kristal büyümesidifüzyon sınırlı yığılma
Tıklayın — oradan yeni bir kristal büyümeye başlasın
Camdaki kırağının, bakır kristalinin, yıldırımın ortak matematiği. Rastgele dolaşan parçacıklar yığına ilk değdikleri yerde donuyor — bu yüzden uçlar büyüyor, iç kısımlar aç kalıyor. Deseni kimse çizmiyor, kendi kendine ortaya çıkıyor.
E61Cam şişe — ışığın ayrışmasıdalga boyuna göre kırılma
İmleci gezdirin — şişe dönsün, gökkuşağı kaysın
Işın camın içine giriyor, arka yüzeyden çıkıyor — ve her renk farklı açıyla kırılıyor. Kenarlardaki gökkuşağı saçağı buradan geliyor; prizmanın ışığı ayırmasıyla aynı olay. Şişenin biçimi de tek bir matematiksel yüzey olarak tanımlı, model dosyası yok.
Beğendiklerinizin numarası hazır mı?
"Siteme E05, E11 ve E13 istiyorum" demeniz yeterli — hangi bölümde nasıl duracağını birlikte kurgular, size özel uyarlarız. Bu katalog büyümeye devam ediyor.