Ne işe yarar (iş diliyle)
Tasarımcıdan gelen sabit ölçülü (ör. 1920×1080) illüstratif bir kompozisyonu — karakter, dekor, yüzen öğeler — her ekran boyutunda oranları bozulmadan gösterir. Aynı bileşen, kurucu ekrandaki küçük önizleme kutusunda da tam ekran alıcı sayfasında da aynı görüntüyü verir; “önizlemede farklı görünüyordu” şikâyeti biter. Çok dar ekranda kompozisyon okunmaz hale geleceği anda düzen kendiliğinden dikey akışa döner.
Hangi müşteri/projelerde işe yarar
Kampanya mikrositeleri, lansman/tebrik sayfaları, oyunlaştırılmış iç iletişim ekranları — tasarımın “resim gibi” durması gereken her yer. Ayrıca builder + canlı önizleme deseni olan her ürün (e-posta/kart/poster kurucuları): önizleme, gerçek çıktının küçültülmüşü olur, ayrı bir “preview” kodu yazılmaz.
Nasıl çalışır (kısa, sade)
Sahne, kendi boyutunu ölçü birimi yapan bir kapsayıcıdır (CSS container-type: size). İçindeki her öğe piksel değil, sahnenin yüzdesiyle konumlanır ve cqh/cqw birimleriyle boyutlanır; yerleşim tek bir veri dosyasında (yuva listesi) durur. Sahne büyüyünce/küçülünce her şey birlikte ölçeklenir. Belirli genişliğin altında kompozisyon moddan çıkar: başlık, karakter, öğeler alt alta sütun olur.
Olgunluk
Canlıda kanıtlanmış (Borusan Burada: aynı PackageScene bileşeni builder önizlemesi + tam ekran alıcı sayfası; 720px altı ve dikey tablet sütun düzeni). Desen taşınabilir; kod kopyalamaktan çok yaklaşım aktarılır.
Teknik (geliştiriciler için)
Repo ahmetgon/borusanob: src/lib/scene.ts (yüzde tabanlı Box + kart sayısına göre yuva seçimi), src/components/PackageScene.tsx, globals.css (.stage, sütun media query’si). Dikkat: container-type: size içeride yükseklik ölçüsü ister (aspect-ratio verildi); animasyon offset’leri de yüzdeyle hesaplanmalı ki uçuş yolları her boyutta doğru kalsın; iOS’ta background-attachment: fixed yerine sabit pseudo-element.