Katman reçeteleri

Bir reçete, bir katmanın nasıl gireceğini tarif eder. Hazır reçeteler aşağıda; kendi reçetelerinizi recipes ayarıyla ekleyin (rehber).

Yazı reçeteleri (data-in)

Reçete	Başlıklar (bölünmüş)	Diğer elemanlar (blok)
fade	Solma	Solma
rise	Kelimeler maskeden yükselir	46 px yükselip belirir
drop	Kelimeler yukarıdan düşer	Düşüp belirir
slide-left, slide-right	Kelimeler yandan kayar	Yandan kayar
mask	Kelimeler maskeden açılır	Yukarı doğru açılır (clip)
lines-up	Satırlar sırayla maskeden yükselir	Clip ile açılır
stagger	Kademeli kelimeler	Kademeli yükselir
blur	Odak çekme	Odak çekme
zoom	0,6'dan büyür	Büyüyerek gelir
flip	Kelime başına 3D dönüş	3D dönüş
skew	Eğik kayma	Eğik kayma
words-blur	Her kelime ayrı netleşir	Bulanıktan netleşir
chars-up	Harfler maskeden yükselir	Yükselir
chars-blur	Harfler netleşir	Bulanıktan netleşir
chars-flip	Harfler 3D döner	Döner
chars-wave	Harfler dalga halinde	Yükselir
chars-scale	Harfler büyüyerek belirir	Büyüyerek gelir
tracking	Harfler geniş aralıktan toplanır	Solma
typewriter	Harfler tek tek belirir	Adım adım belirir
glitch-text	Harfler eğilerek dağınık gelir	Eğilerek gelir
float	Kelimeler yükselir, sonra hafifçe süzülür (döngü), üzerine gelince kalkar	Yükselir

Bir başlık (h1–h4) veya data-split olan herhangi bir eleman bölünmüş sürümü kullanır; diğer elemanlar tek blok olarak canlanır.

Çıkışlar (data-out)

reverse (varsayılan: girişin tersi, süresinin %55'i), fade, up, down, left, blur, none.

Görsel reçeteleri (imageIn)

Giren slaytın arka planına uygulanır: develop (siyah-beyazdan renge), focus (bulanıktan nete), spotlight (karanlık, döndürülmüş yakınlaşmadan normale), rise, tint (sepyadan renge), flicker, depth-zoom (slayt boyunca tutulan yavaş yakınlaşma), breathe (hafif yakınlaşma döngüsü).

Kare formatı

{
  "split": "words",
  "mask": true,
  "stagger": 38,
  "order": "start",
  "in":    [{ "y": "105%" }, { "y": 0, "d": 1000, "e": "expo.out" }],
  "loop":  [{ "y": 0 }, { "y": "-8%", "d": 1800, "e": "sine.inOut" }],
  "hover": [{ "y": 0 }, { "y": "-10%", "d": 260, "e": "power2.out" }],
  "out":   [{ "o": 1 }, { "o": 0, "d": 400, "e": "power2.in" }]
}

Alan	Tip	Açıklama
split	none | words | chars | lines	Yazının nasıl bölüneceği.
mask	boolean	Her kelimeyi kendi kutusuna kırp (maskeden açılma).
stagger	ms	Parçalar arası gecikme.
order	start | center | random	Kademe sırası.
spreadX	em	Merkezden harf başına ek aralık (tracking efektleri).
scatter	[x, y] em	Parça başına rastgele başlangıç kayması.
in	Kare[]	Giriş: ilk kare = başlangıç durumu, son kare = nötr.
loop	Kare[]	Girişten sonra ileri geri oynatılır.
hover	Kare[]	İmleç slayt üzerindeyken oynatılır.
out	Kare[]	Çıkış.

Kare alanları

Alan	Anlamı	Birim
o	opaklık	0–1
x, y, z	kaydırma	px sayı, ya da "%" / "em" metni
s, sx, sy	ölçek	sayı
r, rx, ry	döndürme	derece
skx, sky	eğme	derece
blur	bulanıklık	px
gray, sepia	gri ton, sepya	0–1
contrast, bright, sat	kontrast, parlaklık, doygunluk	1 = normal
hue	renk döndürme	derece
clip	inset()	% olarak [üst, sağ, alt, sol]
d	önceki kareden itibaren süre	ms
e	ease	aşağıdaki adlar

Her sayı, 600 px altında farklı değer için { "base": 30, "phone": 12 } olabilir.

Ease'ler

linear, steps, sine.out, sine.inOut, power1.out, power2.in, power2.out, power2.inOut, power3.in, power3.out, power4.out, expo.out, expo.inOut, circ.out, back.out.