Bu sitedeki her metin ekrana "çözülerek" geliyor: önce rastgele glifler, sonra soldan sağa gerçek karakterler. Bu yazı, o dilin iki katmanını anlatıyor — DOM'da el yazması bir decode motoru ve WebGL'de paylaşılan bir glyph shader ailesi.
Neden hazır plugin değil?
GSAP'in ScrambleTextPlugin'i var ve iyi çalışıyor. Ama iki şeye ihtiyacım vardı ve ikisi de plugin'de yoktu: yazım sınırında duran bir ▌ frontier cursor'ı ve scroll geri sarıldığında animasyonun anlamlı ters oynaması — karakterlerin çözülme sırasının tersinden tekrar karışması. Motorun çekirdeği tek bir GSAP tween'i; her tick'te ilerleme değerine göre üç bölge çiziliyor:
// [ çözülmüş | ▌ | scramble ]
const solved = text.slice(0, frontier);
const noise = randomGlyphs(text.length - frontier);
el.textContent = solved + CURSOR + noise;Layout kaymasına karşı kilit
Scramble sırasında metin genişliği titrer — W ile i aynı genişlikte değil. Çözüm ucuz: animasyon başlamadan elementin son genişliği ölçülüp min-width olarak sabitleniyor. Metin içi titreşim kalıyor (istenen etki), layout kayması gitmiş oluyor.
Erişilebilirlik ekran okuyucuda başlar
Scramble halindeki metin ekran okuyucu için gürültü. Animasyon boyunca gerçek metin aria-label'da duruyor; görsel katman aria-hidden. prefers-reduced-motion altında motor hiç çalışmıyor, metin doğrudan render ediliyor.
Eşzamanlılık bütçesi
Bir bölüm görünür olduğunda beş-altı metin aynı anda decode olmak isteyebilir. Hepsine izin verilirse ekran karnavala dönüyor. Motor en fazla dört eşzamanlı scramble'a slot veriyor; sıradakiler daha sakin bir typing moduna düşüyor. Kaos kontrollü kalıyor.
WebGL tarafı: tek atlas, beş tüketici
Portre, proje önizlemeleri, skill etiketleri, arka plan ve toz — hepsi glif çiziyor. Her biri kendi glyph texture'ını üretse beş canvas, beş upload. Bunun yerine tek bir runtime glyph atlası refcount'lu bir singleton'dan paylaşılıyor ve ortak GLSL chunk'ı her shader'a concat ediliyor:
// glyph.chunk.glsl — her tüketici aynı fonksiyonları kullanır
float glyphLuma(vec2 cell, float t);
vec4 glyphAt(vec2 uv, float index);Öğrenilenler
- Ters oynatma baştan tasarlanmalı: "reverse" sonradan eklenecek bir özellik değil, veri modelinin parçası.
- Ölç, sabitle, sonra oynat: layout kilidi olmadan scramble animasyonu profesyonel görünmüyor.
- Paylaşılan kaynak refcount ister: atlas'ı ilk isteyen üretir, son bırakan yok eder; aradaki herkes bedavaya biner.