Stepshots, ana sayfa demo videolarının yerine geçmek üzere döngüsel HTML ve CSS klipleri öneriyor

Ana sayfadaki demo medyasını döngüsel HTML ve CSS ile değiştirmeyi anlatan bir Stepshots yazısı, 5 Kasım'da Hacker News'in ana sayfasına çıktı. Stepshots'un CSS feature clips adını verdiği bu teknik, kaydedilmiş ürün videolarının yerine tamamen markup ve stylesheet'lerle oluşturulmuş kısa animasyonları koyuyor: video dosyası yok, GIF yok, JavaScript yok.

Feature clip nedir

Yazıya göre bir clip, düz HTML ve CSS ile yazılmış, yaklaşık on saniyelik, sadeleştirilmiş bir arayüz döngüsü. Piksel değil markup olduğu için her boyutta keskin render edilir, sitenin açık ve koyu temasını takip eder, herhangi bir script çalışmadan önce başlar ve görüntü olarak yeniden çekilmek yerine kod olarak düzenlenir. Yaklaşım framework'ten bağımsız ve Stepshots, sayfasındaki üç örnek clip'i tek bir 3.3 KB'lık gzipped stylesheet'in kapsadığını, JavaScript'e gerek kalmadığını söylüyor. Yazıda ayrıca gerçek ürün akışlarını kaydetmek için bir komut satırı iş akışı gösteriliyor, ancak kliplerin kendisi statik.

Tarif

Yazının çekirdeği, bir coding agent'a verilmek üzere yazılmış bir prompt. Önerileri, özetle:

• Yalnızca ürünün gerçekte yaptığı şeyi göster. Önce gerçek arayüzü incele ve etiketleri birebir kopyala; dilediğin kadar sadeleştir ama özellik, düğme veya sonuç uydurma, örnek veri için kurgusal bir şirket kullan.
• Döngüyü on saniyelik, 0–100%'lik bir zaman çizelgesi üzerinde üç ya da dört vuruş olarak yapılandır; sıfırlamayı gizleyen bir fade için başta yaklaşık %3, sonda %4 boşluk bırak.
• Temel stilleri son kare olarak ele al. Keyframe olmadığında her öğe zaten bitmiş görünmeli; bu yüzden döngü ortasında çıkan her şey opacity sıfırdan başlamalı.
• Her şeyi em cinsinden boyutlandır. Container-query sahnesi — container-type inline-size'a ayarlı, font-size 2.2cqw ve sabit en-boy oranı — mock'un video gibi ölçeklenmesini sağlar; clip içinde pikselden kaçınılır.
• Renkleri projenin theme token'larından çek ki clip açık ve koyu modu takip etsin; yalnızca terminal gibi gerçek dünyada tek renkli olan öğeler sabit kodlanır.
• Zamanlamayı yeniden kullanılabilir sınıflar üzerinden paylaş — örneğin herhangi bir öğeyi %30 işaretinde görünür yapan tek bir sınıf — her öğeye özel bir keyframe yerine. Yazma efektleri, karakter sayısıyla eşleşen steps() ile bir clip-path inset'in adımlandırılmasından gelir.
• Bir değer değiştiğinde her iki sürümü tek bir grid hücresinde üst üste koy ve step-end ile anında değiştir; geçiş ortasında iki etiketi crossfade etmek görüntüyü bulanıklaştırır.
• İmlece kendi keyframe'lerini ver; top ve left yüzdeleriyle konumlandır ve her tıklamada kısa bir scale-down basışı ekle. Ucu sol üst köşede durur, bu yüzden hedefin etiketinin üzerine değil yakınına nişan al.
• Prefers-reduced-motion'a saygı göster: tüm animasyonu iptal et ve imleci gizle; bu ayrıca önemlidir çünkü duraklatılmış bir döngü aksi halde sıfırlanma durumunda kalırdı.
• role="img" ekleyin ve clip'in ne gösterdiğini anlatan bir aria-label ekleyin.

Sonucu doğrulamak

Prompt, bir QA turuyla kapanıyor: document.getAnimations() ile tüm animasyonları duraklat, her animasyonun currentTime'ını vuruş başına bir kareye atla ve ekran görüntüsü al. Kontroller arasında imlecin hedefine inmesi, 390px genişlikte hiçbir şeyin taşmaması, iki temanın da doğru görünmesi ve reduced-motion karesinin kendi başına anlamlı olması yer alıyor.

Minimal bir örnek

Stepshots, bir durum etiketinin Draft'tan Published'a döndüğü en küçük çalışan clip'i de içeriyor. Her iki etiket aynı grid hücresini kaplıyor, keyframe'ler görünürlüklerini döngünün orta noktasında değiştiriyor ve bir wrapper tüm gövdeyi içeri ve dışarı fade ediyor. Build adımı da yok, kütüphane de yok; düz markup olduğu için yazıya göre yalnızca template sözdizimi değiştirerek React, Vue, Svelte, Astro, Rails veya Dioxus'a taşınabiliyor.

Clip mi interaktif demo mu

Stepshots sınırını kendisi çiziyor: bir clip sadeleştirilmiş bir mock'tur, dolayısıyla kanıtlamaktan çok açıklar. Klipler on saniyede tek bir fikre, landing page'deki özellik satırlarına ve tıklama gerektirmeyen harekete uygundur. Tıklana tıklına gezilen gerçek ekranlar, alıcının hızına bırakılmış akışlar ve drop-off analitiği ise interaktif demolara aittir — ki dikkat çeken nokta, Stepshots'un sattığı de tam olarak bu: canlı bir ürünü gömülebilir, izlenebilir demolara kaydetmek.

Neden önemli

Ana sayfa demo videoları tanıdık bir yük: ağır dosyalar, sabit çözünürlükler, tema duyarlılığının olmayışı ve çoğu zaman reduced-motion alternatifinin eksikliği. Klipler bunun yerini ölçeklenen, iki temayı da takip eden, JavaScript'ten önce render edilen, ARIA semantiği taşıyan ve diğer her kod değişikliği gibi diff'lenen birkaç kilobytelık metinle alıyor. Ödünleşim sadakat — bir mock, bir kayıttan daha azını kanıtlar — ama bir özelliğin bir bakışta ne yaptığını göstermek gibi dar bir iş için bu teknik, genellikle videoya emanet edilen işi CSS keyframe'lerin halledebileceğini savunuyor.