Net Stüdyo · Stil kataloğu Kasım 2026 · 22 stil · 20 mikro animasyon · 6 etkileşim · 9 estetik

Stil kataloğu

Siteniz için bir tarz seçin. Buradaki her tarz, hayali bir İstanbul işletmesine giydirilmiş çalışan bir demo; telefonunuzda açıp gezebilirsiniz.

Her işletmeye üç seçenekle geliyoruz: biri güvenli, biri cesur, biri sanatsal. Birine dokunun, uygun kareler işaretlensin.

Kırmızı kalemle işaretli stiller ve bölümler Kasım 2026'da eklendi.

01

Kitap Sayfası

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Kekik Ev Yemekleri · menü kitabı (hayali işletme)

Sayfası çevrilen resimli kitap. Sıcak, anlatıcı, el yapımı hissi veren; her bölüm kendi rengini taşıyor.

Kime yakışır
Restoran ve kafe menüsü, kitapçı, pastane, çocuk markaları, bir kampanyanın hikâyesi.
İmza hareket
Sayfa kâğıt gibi kıvrılarak döner, arka yüzü görünür; altında yumuşak gölge.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Çok ürünlü e-ticaret, hızlı bilgi aranan kurumsal hizmetler.
Mobilde
Tek sayfa görünümü, kaydırarak (swipe) çevirme.
Malzeme
Her sayfa için bir illüstrasyon (Procreate / Illustrator) ya da ürün fotoğrafı.
Teknik
  • three.js
  • Vertex shader ile sayfa kıvrımı
  • GSAP
  • Canvas dokular

Mercimek çorbası, sıcak ekmek

Canela → Fraunces

Mercimek çorbası, sıcak ekmek

El yazısı başlık → Caveat Brush
02

Rönesans Kolaj

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: Atölye Venüs · güzellik & bakım (hayali işletme)

Klasik yağlı boya manzara ile bugünün parlak pop objeleri yan yana. İronik, lüks, galeri havasında.

Kime yakışır
Güzellik salonu, kuaför, butik otel, konsept kafe, sanat galerisi, moda butiği.
İmza hareket
Kaydırdıkça kamera tablonun katmanları arasında ilerler, pop objeler süzülür; sonra sakin bir editoryal sayfaya oturur.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Hızlı bilgi isteyen hizmetler, düşük bütçeli işler.
Mobilde
Katman sayısı azalır, objeler daha az hareket eder.
Malzeme
Telifsiz tablolar (Met Open Access, Rijksmuseum, Wikimedia) katmanlara ayrılmış PSD; ürün fotoğrafları ya da 3D objeler.
Teknik
  • three.js katmanlı düzlemler (2.5D)
  • GSAP ScrollTrigger
  • Lenis
  • Orijinalde Theatre.js + GLB

Güzellik bir zanaattır

HW Cigars / Canela → Instrument Serif

Güzellik bir zanaattır

Imperial Script → Pinyon Script

Güzellik bir zanaattır

Neue Montreal → Inter
03

Obje Tarlası

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Lazerhane · kişiye özel hediyeler (hayali işletme)

Beyaz kilden objelerle dolu sonsuz bir masa. Sürükledikçe ürünler kayar, üstüne gelince gerçek malzemesi ortaya çıkar.

Kime yakışır
Hediyelik eşya, lazer kesim atölyesi, takı, seramik, oyuncak; ürün çeşidi bol her KOBİ.
İmza hareket
Ataletli, sonsuz sürüklenen obje alanı; üzerine gelince kil rengi gerçek malzemeye döner, fiyat etiketi çıkar.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Tek ürünlü işletmeler, yalnız hizmet satanlar.
Mobilde
Daha az obje, dokunarak sürükleme.
Malzeme
Ürünlerin 3D modelleri: telefonla fotogrametri (Polycam, RealityScan) ya da Blender.
Teknik
  • three.js
  • InstancedMesh
  • RoomEnvironment ışık
  • Orijinalde R3F + cannon fizik + GLB

Kişiye özel hediyeler

ABC Monument Grotesk → Geist
04

Şişme Harf

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Pofuduk Kafe & Tatlı (hayali işletme)

Balon gibi şişkin, parlak 3D yazı; etrafında dönen çıkartma objeler ve köşelerde canlı HUD yazıları. Oyunbaz ve genç.

Kime yakışır
Kafe, tatlıcı, dondurmacı, oyuncakçı, çocuk etkinliği, kreatif ajans.
İmza hareket
Fareyle eğilen şişme yazı; harfleri karışıp yerine oturan (scramble) etiketler; gece/gündüz teması.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Ciddi kurumsal hizmetler, yaşlı hedef kitle.
Mobilde
Daha az çıkartma, düşük çözünürlük oranı.
Malzeme
Logonun ya da kelimenin vektör yolu; çıkartma objeler için basit modeller.
Teknik
  • three.js TubeGeometry
  • MeshPhysicalMaterial clearcoat
  • RoomEnvironment
  • Orijinalde R3F + postprocessing

merhaba, şekerim!

TikTok Sans → Archivo

merhaba, şekerim!

Mono → Space Mono
05

HUD Tarama

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: KOR Dövme Atölyesi · İstanbul (hayali işletme)

Bilimkurgu arayüzü. Noktalardan oluşan hologram insan, minicik mono yazılar; kaydırınca sert beyaz-kırmızı bir ters dönüş.

Kime yakışır
Dövme stüdyosu, streetwear, spor salonu, DJ / müzisyen, fotoğrafçı portfolyosu, teknoloji girişimi.
İmza hareket
Tarama çizgili, yanardöner nokta bulutu figür; kaydırınca pikselleşerek beyaz-kırmızı posterize sahneye geçiş.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Aile işletmeleri, sıcaklık isteyen markalar.
Mobilde
Daha az nokta, metin sütunları alt alta.
Malzeme
Gerçek insan taraması: fotogrametri ya da Gaussian splat (Polycam, Luma). Fotoğraf bilgisiyle bizde üretilebilir.
Teknik
  • three.js Points
  • MeshSurfaceSampler
  • Özel shader
  • GSAP ScrollTrigger
  • Orijinalde Barba.js geçişleri

RANDEVU 0016 · İSTANBUL

PP Supply Mono → JetBrains Mono

RANDEVU 0016 · İSTANBUL

Dev rakamlar → Big Shoulders Display
06

Piksel İz

Güvenli
Önce mobil · gerçek hissi için telefonundan aç

Demo: Netlik Mali Müşavirlik (hayali işletme)

İsviçre ekolü sade düzen; imleci takip eden basamaklı, pikselli bir renk izi. Ciddi ama canlı.

Kime yakışır
Mali müşavir, avukat, klinik, mimarlık ofisi, yazılım ve danışmanlık firmaları.
İmza hareket
Pikselli eko izi; başlığın üstüne yükselen kart; vurgu rengi markaya göre değişir.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Görsel ağırlıklı ürün satışı, gece hayatı.
Mobilde
İz kendi kendine çizer, kaydırınca hızlanır.
Malzeme
Gerekmez. Fotoğraf varsa bento kartlarına girer.
Teknik
  • Canvas2D düşük çözünürlük + büyütme
  • GSAP ScrollTrigger
  • Lenis

Rakamlarınız netleşsin.

Frama → Inter Tight

Rakamlarınız netleşsin.

Neue Montreal → Inter

Rakamlarınız netleşsin.

Supply Mono → JetBrains Mono
07

Neon Tel Kafes

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: Taban · sneaker dükkânı (hayali işletme)

Y2K müzik klibi. Yeşil terminal açılışı, neon tel kafes 3D obje, tıkla-değiştir render geçişleri, graffiti duvarı.

Kime yakışır
Sneaker ve streetwear, gece kulübü, e-spor kafe, festival, müzik etkinliği.
İmza hareket
Terminal açılışı; 1-4 tuşlarıyla tel kafes → normal → matcap → parlak geçişleri; 174 BPM nabız.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Sakin hizmet sektörleri, bilgi odaklı siteler.
Mobilde
Bloom düşük, daha basit geometri.
Malzeme
Ürün ya da maskotun 3D modeli (Blender); isteğe bağlı müzik.
Teknik
  • three.js
  • EffectComposer + UnrealBloom
  • Özel materyaller
  • Orijinalde WebGPU + müzik

TABAN 174 BPM

elevon → Unbounded

TABAN 174 BPM

Terminal → VT323

TABAN 174 BPM

proxima-nova → Inter
08

Rezidans Keşif

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Liman Kule Rezidans · Kilyos (hayali işletme)

Kule, saat kaydırıcısıyla sabahtan geceye döner; daireler müsaitlik renklerinde; plan üstünde güneş haritası, pencereden manzara.

Kime yakışır
Konut projeleri, rezidans, site satış ofisi, emlak geliştirici.
İmza hareket
Saat kaydırıcısı: güneş gerçek konumuna göre döner; seçilen dairede güneşin hangi odaya girdiği görünür.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Tek daire satan emlakçı, sade hizmet işletmeleri.
Mobilde
Filtreler alttan açılan panel, kule tam ekran, dokunarak daire seçimi.
Malzeme
Mimarın renderları, kat planları, daire listesi; Dora'dan kat yüksekliklerinde drone panoraması.
Teknik
  • three.js Sky
  • NOAA güneş formülü
  • SVG kat planı
  • GSAP

Güneşi gören salon, 18. kat

Lüks serif → Cormorant Garamond

Güneşi gören salon, 18. kat

Arayüz → Manrope

Güneşi gören salon, 18. kat

Rakamlar → JetBrains Mono
09

Işıltı Bulutu

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: Yakut Mücevher · kuyumcu (hayali işletme)

On binlerce parıltılı parçacık kaydırdıkça yüzüğe, kolyeye, küpeye, pırlantaya ve monograma akar.

Kime yakışır
Kuyumcu, takı tasarımcısı, parfüm, lüks butik.
İmza hareket
Parçacıklar şekilden şekle akar; hacimsel ışık huzmeleri ve parıltı.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Hızlı bilgi aranan hizmetler.
Mobilde
Parçacık sayısı düşer, bloom yarım çözünürlük.
Malzeme
Ürün siluetleri (SVG) ya da basit 3D modeller; logo.
Teknik
  • three.js Points
  • Şekil örnekleme + gecikmeli morf
  • Curl noise
  • Bloom

Işığı taşıyan taşlar

İnce geniş geometrik → Outfit

Işığı taşıyan taşlar

Gövde → Inter
10

Ürün Vitrini

Güvenli
Önce mobil · gerçek hissi için telefonundan aç

Demo: Telve Kahve (hayali işletme)

Espresso tonlarında ürün odaklı vitrin: dev başlık, kendiliğinden yazılan el yazısı, şubeleri gösteren saat kadranı, basılan fiş.

Kime yakışır
Kafe, pastane, şarküteri, fırın, çikolatacı.
İmza hareket
El yazısı çizilerek açılır; saat kadranı şubeler arasında döner; yarıktan fiş basılır.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Ürünü olmayan hizmet işletmeleri.
Mobilde
Ürünler başlığın altına iner, kadran küçülür.
Malzeme
Dora'nın dekupe ürün fotoğrafları (bardak, paket, tatlılar).
Teknik
  • DOM + GSAP ScrollTrigger
  • SVG stroke çizimi
  • Lenis
  • Dekupe ürün fotoğrafları (WebP, gerçek gölge)

Anına göre kahve

Kalın grotesk → Inter Tight

Anına göre kahve

El yazısı → Yellowtail

Anına göre kahve

Mono → Space Mono
11

Tüplü Ekran

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: EskiYeni Video · kaset dijitalleştirme (hayali işletme)

Karanlıkta süzülen eski tüplü televizyonlar, kamera arayüzü (fps, REC, zaman kodu), piksel dağılmalı geçişler.

Kime yakışır
Video prodüksiyon, kaset dijitalleştirme, düğün videocusu, müzik stüdyosu.
İmza hareket
Süzülen CRT ekranlar ve kamera HUD'u; işler bir televizyonun içinde, piksel dağılarak değişir.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Sakin, aydınlık markalar.
Mobilde
Daha az TV, karusel dokunmatik kaydırma.
Malzeme
Müşteri arşiv görüntüleri; Dora'dan mavi ışıklı ekip portreleri.
Teknik
  • three.js
  • Ekran shader'ı
  • Bloom + gren
  • Sürüklenen karusel

Eskiyi yeniden hissettiriyoruz

Dar uzun başlık → Antonio

Eskiyi yeniden hissettiriyoruz

Arayüz → JetBrains Mono
12

Sarmal

Güvenli
Önce mobil · gerçek hissi için telefonundan aç

Demo: Sarmal Tahlil & Check-up (hayali işletme)

Açık nane zeminde yeşil parçacıklardan dönen DNA; sakin, güven veren klinik dili.

Kime yakışır
Tahlil merkezi, klinik, diş ve göz kliniği, veteriner, eczane.
İmza hareket
Alan derinliğiyle dönen parçacık DNA; kelime kelime netleşen başlıklar.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Gece hayatı, agresif markalar.
Mobilde
DNA başlığın altında, kartlar dikey.
Malzeme
Klinik, laboratuvar ve ekip fotoğrafları (Dora).
Teknik
  • three.js Points
  • GSAP SplitText
  • ScrollTrigger
  • Akordeon kartlar

Anlamakla başlayan tıp

Yuvarlak geometrik → Figtree

Anlamakla başlayan tıp

Gövde → DM Sans
13

Nokta Büst

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: Zihin Yazılım · yapay zekâ (hayali işletme)

Noktalardan oluşan insan büstü, elektrik mavisi ışık ve kırmızı kenar; omuzlar akıp dağılır.

Kime yakışır
Yazılım, yapay zekâ girişimi, estetik ve dermatoloji kliniği.
İmza hareket
Mavi anahtar ışık + kırmızı kenar ışığıyla nokta bulutu büst; dağılan omuzlar.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Sıcak, geleneksel markalar.
Mobilde
Nokta sayısı düşer, istatistikler gizlenir.
Malzeme
Gerçek büst taraması (fotogrametri) ya da CC0 model.
Teknik
  • three.js Points
  • MakeHuman CC0 model
  • Curl noise
  • Bloom

Seninle gelişen akıl

İnce başlık → Inter

Seninle gelişen akıl

Mono → Space Mono
14

Ritüel Akışı

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Köz Kahve Kavurmacısı (hayali işletme)

Türk kahvesi ritüeli dört sahnede: KAVUR → ÇEK → PİŞİR → İÇ; çekirdekler sahneden sahneye düşer, köpük dalgası geçişi.

Kime yakışır
Kahve kavurmacısı, zeytinyağı, bal, çikolata, fırın; süreci olan her ürün.
İmza hareket
Bölümler arası obje sürekliliği ve ekranı süpüren köpük dalgası.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Süreç anlatmayan hizmetler.
Mobilde
Sahneler dikey akar, çekirdek sayısı düşer.
Malzeme
Dora'nın aynı pencere ışığında dekupe ürün fotoğrafları (cezve, fincan, değirmen).
Teknik
  • three.js lathe objeler
  • Canvas süreklilik katmanı
  • Dalga shader
  • GSAP ScrollTrigger

Kavur, çek, pişir, iç

Yumuşak serif → Young Serif

Kavur, çek, pişir, iç

Bölüm başlığı → Bricolage Grotesque

Kavur, çek, pişir, iç

Gövde → DM Sans
15

Hareket Reeli

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: NetStudyo · kendi tanıtımı (hayali işletme)

Kesmesiz, eşleşen nesnelerle akan hareket reeli; kaydırdıkça oynar. Aynı kod MP4 tanıtım videosu üretir.

Kime yakışır
Her KOBİ'nin açılış videosu ve Instagram reeli; ajans ve stüdyo tanıtımı.
İmza hareket
Nokta → küre → leke → logo noktası eşleşen kesmeleri; kalınlığı akan yazı.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Uzun bilgi okunması gereken sayfalar.
Mobilde
Sahneler sadeleşir, eşleşen kesmeler korunur; dikey 9:16 video.
Malzeme
İşletmenin rengi, logosu, 2–3 rakamı; gerisi kod.
Teknik
  • GSAP master timeline
  • three.js InstancedMesh
  • Değişken font
  • Playwright + ffmpeg MP4

HER · BİR · KARE

Değişken kalınlık → Inter Tight

HER · BİR · KARE

İtalik vurgu → Instrument Serif

HER · BİR · KARE

HUD → JetBrains Mono
16

Kuşbakışı Galeri

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Garaj 34 Oto Galeri · İstanbul (hayali işletme)

Ana sayfa tepeden görülen akşam otoparkı; araca dokununca kamera içine dalar; ekspertiz, 360° ve kredi hesaplayıcı.

Kime yakışır
Oto galeri, emlak (plan → daire), restoran rezervasyon, otel, marina.
İmza hareket
Kuşbakışından araca dalış geçişi ve ekspertiz şeması.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Tek ürünlü markalar.
Mobilde
Otopark dikey kadraj, detay alttan panel.
Malzeme
Mavi saatte 24–36 karelik araç çevresi çekimi (Dora), drone otopark görüntüsü.
Teknik
  • Canvas/SVG otopark
  • GSAP dalış geçişi
  • three.js döner araç
  • Kredi hesaplayıcı

Mavi saatte 16 araç

Geniş kalın grotesk → Archivo

Mavi saatte 16 araç

Panel → Inter

Mavi saatte 16 araç

Etiket → JetBrains Mono
17

Üzerinde Gör

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Sükût Dövme Stüdyosu · Kadıköy (hayali işletme)

Sakin lüks: 3D insan modeli üzerinde dövme dene; bölge seç, boyut ve açı ayarla, tarif et, taslak gelsin.

Kime yakışır
Dövme, takı, gözlükçü, tekstil baskı, mobilya ve kumaş seçici.
İmza hareket
Dövme tenin kıvrımına uyarak oturur; kamera seçilen bölgeye kayar.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Konfigüratör gerektirmeyen işler.
Mobilde
Model tam ekran, panel alttan çekmece.
Malzeme
Stüdyo videosu (Dora), sanatçıların çizim kütüphanesi.
Teknik
  • three.js DecalGeometry
  • MakeHuman CC0 model
  • Raycast
  • GSAP kamera

Sessizce. Kalıcı.

Zarif serif → Cormorant Garamond

Sessizce. Kalıcı.

Aralıklı büyük harf → Cormorant SC

Sessizce. Kalıcı.

Arayüz → Inter
18

Ses Sahnesi

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Duyum İşitme Merkezi · İstanbul (hayali işletme)

Lacivert zeminde ses dalgası halkaları; cihaz kaydırınca kutusundan çıkar, çizilen bir yol boyunca özellikleri anlatır.

Kime yakışır
İşitme merkezi, hoparlör/ses sistemi, müzik aleti, podcast stüdyosu.
İmza hareket
Ses dalgası halkaları ve eğri yol üstünde ilerleyen ürün.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Ürünü 3D gösterilemeyen işler.
Mobilde
Yol dikey çizilir, ürün küçülür.
Malzeme
Ürünün 3D modeli ya da döner tabla çekimi (Dora).
Teknik
  • Shader halkalar
  • three.js ürün
  • GSAP MotionPath
  • SplitText

Sesi yeniden keşfet

İnce başlık → Inter

Sesi yeniden keşfet

Etiket → Geist Mono
19

Plandan Anahtara

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Temel Yapı İnşaat · İstanbul (hayali işletme)

Kaydırdıkça tek kesintisiz kamera: salon → mutfak → mermer adada açılan pafta → plan → bitmiş ev.

Kime yakışır
İnşaat, iç mimar, mutfak dolabı, peyzaj firması.
İmza hareket
Mermer adada açılan proje paftası, sonra plandan gerçeğe.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Hızlı bilgi isteyen hizmetler.
Mobilde
Dikey kadraj, sahne sayısı aynı, kare boyutu düşük.
Malzeme
Bitmiş projede Dora'nın tek plan gimbal/drone çekimi ya da MH1 (render → yapay zekâ videosu).
Teknik
  • three.js sahne
  • Scroll'a bağlı kamera yolu
  • Prosedürel mermer
  • ScrollTrigger

Plandan anahtar teslime

Başlık → Inter
19B

Aşama Aşama

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Temel Yapı İnşaat · ikinci seçenek (hayali işletme)

Kamera sabit: hologram plandan bitmiş eve, ev aşama aşama yükselir; şeffaf ve güven veren.

Kime yakışır
Müteahhit, inşaat firması, rezidansın "inşaat durumu" bölümü.
İmza hareket
Aşamalar alttan yukarı "inşa edilir" gibi açılır; sarı ilerleme çubuğu.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Bitmiş ürün satanlar.
Mobilde
Ev dikey kadrajın ortasında, aşama başına kısa kaydırma.
Malzeme
Aynı tripod noktasından aylık şantiye fotoğrafları (Dora).
Teknik
  • three.js aşamalı yapı
  • Kenar çizgisi hologram
  • ScrollTrigger
  • Maske geçişi

Temelden çatıya, adım adım

Yumuşak serif → Fraunces

Temelden çatıya, adım adım

Arayüz → Inter
20

Masadaki Albüm

Sanatsal
Önce mobil · gerçek hissi için telefonundan aç

Demo: NetStudyo · İşlerimiz (hayali işletme)

Spot ışıklı karanlık masada kapalı bir kitap; açılır, sayfalar kâğıt gibi kıvrılır, her sayfa bir iş.

Kime yakışır
Portfolyo, düğün/aile fotoğrafçısı, mimarlık ofisi, matbaa, tasarım stüdyosu.
İmza hareket
Masadan kalkan kitap ve kıvrılarak dönen sayfalar.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Hızlı alışveriş siteleri.
Mobilde
Kitap tek sayfa açılır, kaydırarak çevrilir.
Malzeme
Dora'nın masa ve obje fotoğrafları; her proje için kısa video.
Teknik
  • three.js masa sahnesi
  • 01'in sayfa kıvrımı shader'ı
  • SpotLight
  • Ken Burns

İşlerimiz, sayfa sayfa

Arayüz → Inter

İşlerimiz, sayfa sayfa

Başlık → Fraunces
21

Taş Plak Gecesi

Cesur
Önce mobil · gerçek hissi için telefonundan aç

Demo: Taş Plak 78 · Ocakbaşı & Kokteyl (hayali işletme)

Marka kimliğinden doğan site: bordo-krem serif logo, kaydırdıkça dönen taş plak, plak kapağı menüler.

Kime yakışır
Meyhane, kokteyl bar, ocakbaşı, bistro, plak kafe.
İmza hareket
Köşede kaydırma hızıyla dönen plak; kapaktan kayarak çıkan menü.
Zorluk
Ayrıntılar: teknik, malzeme, fontlar
Yakışmaz
Kurumsal hizmetler.
Mobilde
Plak alt köşede düğme; menü kaydırmalı şerit.
Malzeme
Logo ve illüstrasyonlar, mekân ve kokteyl fotoğrafları (Dora).
Teknik
  • SVG illüstrasyon
  • GSAP DrawSVG
  • Scroll hızı
  • Kaydırmalı şerit

Her akşamın kendi karakteri var

Serif logo → DM Serif Display

Her akşamın kendi karakteri var

El yazısı → Pacifico

Her akşamın kendi karakteri var

Gövde → DM Sans
M01–M20

Mikro animasyonlar

Ek

Tam site stili değil; her siteye 1–2 tane "imza dokunuşu" olarak serpiştirilen küçük animasyonlar. Aynı bileşen işletmenin Instagram'ı için videoya da çevrilir.

20 animasyonu canlı aç
  • Parçacık
  • Sıvı damlalar
  • Hologram
  • Neon
  • Tel kafes 3D
  • Buzlu cam
  • Kinetik yazı
  • İzometrik
  • Kil 3D
  • ASCII
  • Akışkan degrade
  • Çizgi roman
  • Kalkış tabelası
  • Retro VHS
  • Yarım ton
  • Bauhaus
  • Piksel oyun
  • Teknik çizim
  • Art deco
  • Neo-brütalizm
P01–P06

Premium etkileşimler

Her sitede

Süs değil, her birinin bir işi var. Telefonda imleç ve üstüne gelme yok; her birinin telefon karşılığı yazılı.

EtkileşimNe işe yararTelefonda
P01 Mıknatıslı butonlarSite sana tepki veriyormuş gibi hissettirir.Dokununca basılma, halka dalgası, kısa titreşim.
P02 Kademeli kaydırmaBilgi sırayla, okuma hızında gelir.Aynısı, daha kısa ve hafif. Her sitede standart.
P03 Kontrollü parallaxFark edilmeden önce hissedilir.Ya kapalı ya çok hafif; kaydırmayı asla yavaşlatmaz.
P04 Sürpriz yumurtaMerakı ödüllendirir, site akılda kalır.Logoya uzun basma ya da sayfa sonunda sürpriz.
P05 Sayfa geçişleriTek parça, kesintisiz deneyim.Daha hızlı; geri kaydırma bozulmaz. Her sitede standart.
P06 Duruma göre imleçTıklamadan önce neyin mümkün olduğunu söyler.Görünür ipucu etiketleri ("▶ izle", "kaydır").
AY1–AY9

Marka estetikleri

Çekim yönü

Stil sitenin nasıl hareket ettiğini, estetik görsellerin neye benzediğini belirler. Her müşteriye 1 ana + 1 yardımcı estetik seçilir; çekim kartı fotoğraf gününe gider. Her sahneden bir dikey kare de çekilir.

  • AY1 Sıvı kesikAkışkan siyah-beyaz şekiller, tek kırmızı, sert flaş.Sokak modası · ajans · etkinlik
  • AY2 Sıvı metal / kromGümüş, erimiş metal, soğuk yumuşak ışık.Kozmetik · teknoloji · kuyumcu
  • AY3 Galeri kurulumuBeyaz boş oda, tek obje, tek renkli ışık noktası.Mimar · iç mimar · butik
  • AY4 Arkadan aydınlatmalı botanikIşık önünde yarı saydam yapraklar, yüksek anahtar.Eczane · organik kozmetik · çiçekçi
  • AY5 Dokunsal yakın planAşırı yakın doku, ten, metal; sığ alan derinliği.Takı · kuaför · deri
  • AY6 Brütalist tipografiSiyah-beyaz, beton, rakam ızgaraları.Spor salonu · mimarlık · plak dükkânı
  • AY7 Renkli modüler ambalajTepeden düz çekim, renk blokları, net gölge.Kafe · şarküteri · gıda markası
  • AY8 Vintage editoryal70'ler dergi kapağı, film greni, sıcak renk.Butik otel · moda · düğün fotoğrafçısı
  • AY9 Çıkartma kolajıBant, etiket, oyunbaz çizim, karışık ölçek.Kafe · oyuncak · genç markalar

Nasıl çalışıyoruz

  1. İşletmenizi ve elinizdeki malzemeyi dinliyoruz
  2. Bu katalogdan üç tarz öneriyoruz
  3. Seçtiğiniz tarzı önce telefon için kuruyoruz
  4. Gerçek fotoğraf ve metinlerinizle tamamlıyoruz
  5. Birlikte kontrol edip yayına alıyoruz