Veyra

Veyra Studio — yaratıcı teknoloji

Veyra

Sürükleyici, sanat yönetmenliğiyle şekillenen web deneyimleri yapıyoruz — ve onları mümkün kılan motoru.

İlk vitrin işimiz: AbaliMotorla tanışın

Site oluşturucu değil

Site oluşturucu değil.Şablon değil.Hareket eden siteleriçin bir motor.

Veyra, yaratıcı geliştirmenin zor ve yeniden kullanılabilir kısımlarını üstlenir — zaman, hareket, kaydırma, yazı ve ışık — sanat yönetmenliğini ise tamamen projeye bırakır.

Motor

Hareket eden her şey, tek bir döngüde.

Veyra Core, çalışma zamanında hiçbir bağımlılığı olmayan bir TypeScript motorudur. Aşağıdaki her demo, bu sayfada çalışan motorun ta kendisidir.

  1. 01

    Tek kare döngüsü

    Girdi, kaydırma, yerleşim, hareket ve çizim; tek bir requestAnimationFrame içinde sıralı aşamalarla çalışır. Sayfadan ayrıldığınızda durur, bir efekt çökse de ayakta kalır.

  2. 02

    Fizikle hareket

    Koreografi için ileri geri sarılabilen zaman çizelgeleri; 30 Hz’de de 240 Hz’de de aynı kesinlikte kalan analitik yaylar.

  3. 03

    Hikâye gibi kaydırma

    Tarayıcının kendi kaydırması, yumuşatılmış hâliyle — yapışkan öğeler, klavye, sayfada bul ve ekran okuyucular çalışmaya devam eder. Sahneler konumu ilerlemeye dönüştürür.

  4. 04

    Her yazı, her yön

    Farsçayı ve Arapçayı harf harf canlandırın; harfler birbirine bağlı kalır. Latin ve Arap harflerini karıştıran metin de sırasını korur.

  5. 05

    Baştan uyarlanabilir

    Motor gerçek kare sürelerini ölçer; kaliteyi ve piksel yoğunluğunu elinizdeki cihaza göre ayarlar.

  6. 06

    Gerektiği yerde WebGL

    Aynı döngü üzerinde isteğe bağlı bir three.js katmanı: piksel ölçekli bir kamera, yerleşime bağlı nesneler ve dokulara aktarılan gerçek HTML.

    Deneyimi açın

Sürüm 0.2’de yeni

  1. 01horizontal()

    Hareket etmenin yeni yolları.

    Bu satırdaki her panel, yeni sürümün iş başındaki hâli — satırın kendisi de öyle: aşağı kaydırın, yana doğru ilerlesin.

    Farsça ve Arapça sayfalarda ters yöne, sağa doğru ilerler; böylece paneller yine okuma sırasıyla gelir.

  2. 02kashida()

    0

    Keşide, hattatın uzatması

    Farsça kelimeler, bir hattatın uzatacağı yerden uzar: önce sin ve şın harflerinden sonra, ardından son bağlantıda — asla lamelif’in içinde, asla bir ZWNJ’nin üzerinden değil.

  3. 03draggable()
    01Fırlat
    02Yakala
    03Diren
    04Otur
    05Adım
    06Dinlen

    Fırlatın

    Eylemsizlik, geri iten kenarlar ve fırlatmanın hızını koruyan durma noktaları. Ok tuşları kartları birer birer kaydırır.

  4. 04flip()

    Yolculuk eden yerleşimler

    Yerleşimi dilediğiniz gibi değiştirin; her öğe bulunduğu yerden varacağı yere süzülür.

  5. 05magnetic() · tilt()
    Koda bakın

    Size doğru eğilenler

    Yaylarla çalışan mıknatıslı düğmeler ve eğilen kartlar. Dokunmatik ekranlarda ve azaltılmış hareket tercihinde kapanırlar.

  6. 06scrambleText()

    Şifre çözme

    Metin, kendi yazısının gürültüsünden süzülüp yerine oturur: Farsça, Farsça harflerle titrer ve bitişik kalır.

  7. 07@veyra/core/glsl

    Gürültü ve ışık

    Organik hareket için tohumlu gürültü ve bunun gibi gölgelendiriciler için GLSL yapı taşları — gürültü, mesafe alanları, OKLab renk.

İşler

Proje 001

Abali

«خنکی صدا دارد.» — Serinliğin bir sesi var.

Cam şişedeki gazlı ayran Doogh Abali için Farsça, sağdan sola bir kampanya konsepti. Serinliğin bir sesi var — soğuk bir Abali’yi açmak bir avuç sestir: taç kapağı kaldıran açacak, kaçan gaz, ilk yudumlar, rahatlamış bir “oh”. Film bu sesleri kaydırmaya yayar: gerçek şişenin fotoğraflarından yeniden kurulmuş bir şişe, fırlayıp yere düşen bir kapak, taşan ve Abali’yi çevreleyen dağlarda kara dönüşen köpük ve tabak tabak dolan bir sofra.

Dil
Farsça, sağdan sola
Yapım
Veyra Core + three.js
Görseller
Hepsi canlı üretiliyor — fotoğraf yok, model dosyası yok
Ses
Sentezlenmiş, baştan açık
Deneyimi açınKaynak

Bağımsız, resmî olmayan bir konsept. Doogh Abali üreticisiyle herhangi bir bağlantısı yoktur.

Proje 002

Durex

“Annoying, isn’t it?” — Can sıkıcı, değil mi?

Durex Invisible için sıfır yerçekiminde geçen, İngilizce bir kampanya konsepti. Bir bebeğin ağlamasıyla açılıyor, ardından espri geliyor. Folyo paketler süzülüp birbirine çarpıyor; biri yırtılıyor ve halka, balon gibi şişirdiğiniz ince, parlak bir kılıfa dönüşüyor — uluslararası standart 18 litre, Durex’e göre sıradan bir prezervatif yaklaşık 40 litre taşıyor. Bırakırsanız sayfada döne döne uçar, bir kenardan çıkıp öbüründen girer, başlıklara çarpıp seker; bağlarsanız su testine ve balonlarla dolu bir gökyüzüne kadar size eşlik eder.

Dil
İngilizce, soldan sağa
Yapım
Veyra Core + three.js — fotoğraf yok, model dosyası yok
Fizik
Çarpışan paketler; sayfanın kendi başlıklarından seken bir balon
Ses
Doğal kayıtlar — çalmadan önce sorar
Deneyimi açınKaynak

Bağımsız, resmî olmayan bir konsept. Reckitt ya da Durex tarafından ısmarlanmamıştır, onlarla bir bağlantısı yoktur.

Stüdyo

Bir stüdyo, bir motor ve ikisinin arasındaki iş.

  1. 01

    Stüdyo

    markalar ve hikâyeler için deneyimler üretir — kampanyalar, lansmanlar, içinde kaydırarak gezilen dünyalar.

  2. 02

    Motor

    kalıcı olandır. Her proje en iyi fikirlerini açık kaynak olarak Veyra Core’a geri verir.

  3. 03

    Vitrin işleri

    kanıttır: motoru daha önce gitmediği yerlere taşıyan, herkese açık işler.

Nasıl inşa ediyoruz

Açık kaynak

Bir sahneyle başlayın.

Veyra Core MIT lisanslıdır. Kılavuzu okuyun, örnekleri çalıştırın, hareket eden bir şey yapın.

GitHub’da Veyra CoreKılavuzu okuyun
import {
  createStage,
  horizontal,
  scenePresets,
  splitText,
} from '@veyra/core'

const stage = createStage()        // one loop, smooth native scroll
const title = splitText('h1', { type: 'chars' })

stage.scene('#story', {
  ...scenePresets.pinned,          // pinned with CSS sticky
  timeline: stage.timeline().fromTo(
    title.chars,
    { y: '1em', opacity: 0 },
    { y: '0em', opacity: 1 },
    { stagger: 0.03 },
  ),
})

// Sideways, in reading order (rightward in Persian)
stage.use(horizontal('#gallery', { snap: true }))

Proje siparişi

Tanıtacak bir şeyiniz mi var? Onu harekete geçirelim.

Veyra üzerinde sanat yönetmenliğiyle şekillenen web deneyimleri tasarlıyor ve geliştiriyoruz: kampanya siteleri, ürün lansmanları, kaydırdıkça ilerleyen hikâyeler — Türkçe, İngilizce, Farsça ya da Arapça. Ne yaptığınızı anlatın.

  • Kampanya siteleri
  • Ürün lansmanları
  • Kaydırdıkça ilerleyen hikâyeler
  • Farsça ve Arapça tasarlanır, aynalanmaz
Bize yazınitsmetti@proton.me