Show HN: Performative-UI – Tasarım Troplarına Dayalı React Bileşen Kütüphanesi

 (vorpus.github.io)
1 puan yazan GN⁺ 4 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • AI girişimleri için AI-native React bileşenleri koleksiyonu; 27 bileşen ve MIT lisansı sunuyor
  • Herkese açık durumda ve kurulum komutu npm install performative-ui
  • Yapılandırma Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion olarak sınıflandırılmış
  • Prompt, TokenStream, LogoMarquee, PricingCard, WaitlistForm gibi bileşenler prompt giriş alanı, token akışı, logo, fiyat kartı ve bekleme listesi formunu üstleniyor
  • Her bileşen açıklaması; fonlama, model adı, logo, sayı ve dönüşüm arayüzü gibi AI girişimi açılış sayfalarında kullanılan tasarım sinyallerini kısa ifadelerle anlatıyor

Genel Bakış

  • Performative-UI, AI girişimleri için herkese açık durumdaki AI-native React bileşenleri koleksiyonudur; 27 bileşen ve MIT lisansı sunar
  • Kurulum komutu npm install performative-ui
  • Bileşenlerin amacı, bir fonlama turunun ne kadar fazla talep gördüğünü sinyallemektir

Bileşen Listesi

  • Atoms

    • Sparkle: Herhangi bir isme ✦ ekleyip iki kat daha hızlı ürün çıkaran öğe
    • GradientText: Sadece italik yazı unicorn seviyesine yetmediğinde kullanılan degradeli metin
    • StatusDot: Öyle olmasa bile her zaman yeşil olan durum noktası

  • Primitives

    • Button: Tıklatmak için hareket ettirilen düğme
    • EyebrowPill: Söylenecek başka bir şey kalmadığında model adının konduğu yer
    • Prompt: Ürün özelliğini açıklamak yerine her AI geliştiricisinin dağıttığı textarea
    Reklam

  • Banners

    • StickyBanner: Yardımcı araç kılığına girmiş fonlama haberi

  • Heroes

    • Rotator: Sadece “everything” demek yeterince iddialı olmadığında kullanılan dönen ifade
    • WordRoll: Ziyaretçinin yazmasını beklemeden Rotator'ın kapsam gösterisini sunar
    • PromptHero: Değer önerisini metin girişiyle değiştiren hero bölümü
    • AsciiHero: Hacker'lar için, doğru newsletter'ları takip edenlerin yaptığı ASCII hero

  • Backgrounds

    • Aurora: Üç blob ile bir kuşağı tanımlayan arka plan
    • NodeGraphBackground: Kavramsal olarak sinir ağı olan düğüm grafiği arka planı
    • FloatingSparkles: “Sihir kendi kendine ship edilmez” diyen süzülen parıltılar

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: Gerçek kod yolda, bu ise fragman
    Reklam

  • Conversation

    • ChatBubble: Konuşma balonunun içindeyse mutlaka doğrudur diyen sohbet balonu
    • TokenStream: Server-sent events (SSE) 2008 HTML5 spesifikasyonuna eklenmiş olsa da 2025'e kadar kullanılmamış gibi davranan token akışı
    • ChatFAB: Artık kaçış yolu kalmadığını söyleyen sohbet FAB'i

  • Social Proof

    • LogoMarquee: Duyduğunuz herkesin, hatta imza atmamış olanların bile güvendiğini ima eden logo kaydırıcısı
    • LogoRow: Yalnızca altı logo olduğunda kullanılan statik logo sırası
    • StatCounter: Yükselen sayıların yükselmeyenlerden daha iyi olduğunu söyleyen sayaç
    • CommunityBadge: Stars'ın yeni MAU olduğunu söyleyen topluluk rozeti

  • Pricing & Conversion

    • PricingCard: Ortadaki kart parladığı için ona göre seçim yaptıran fiyat kartı
    • BeforeAfter: Sol taraf kaos, sağ taraf biziz
    • WaitlistForm: Kendi yarattığı talebi toplayan bekleme listesi formu
    • Popover: Onay için değil, dönüşüm için yapılmış popover

İlgili okumalar

1 yorum

 
GN⁺ 4 시간 전
Hacker News yorumları

  • Sade ve yalnızca özüne odaklanan bir site gösterdiğimde, bu tür gösterişli UI öğeleri olmadığı için ciddiye alınmadığını birkaç projede bizzat duydum
    Bu, YouTuber izleyicilerinin sürekli abonelik çağrısından şikâyet etmesine benziyor. Böyle yapılmasının nedeni, istatistiksel olarak işe yaraması

    • Sonuçta mesele ilk izlenim. Web sitesi tasarımı bir şirketin ilk izlenimi ve tasarım temizse ürünün de temiz ve sağlam olacağına inanılıyor
      Pahalı bir şeyin daha yüksek kaliteli ve genel olarak daha iyi olduğunu düşünmeye benziyor. Bu sitede hero alanındaki ASCII animasyonu en iyi bileşen ama o bileşen kopyalanamıyor. O havalı ASCII hero sayesinde ilk izlenim iyi oldu ve tüm bileşenlere göz attım
    • Yürüttüğüm konferans için bir Substack sitesi kullanıyorum; popup’lar ve her yere serpiştirilmiş abone ol düğmeleri eskiden sinir bozucuydu ama gerçekten işe yarıyor
      Trafiği düşük bir site olmasına rağmen abone sayısı 0’dan neredeyse 1.000’e çıktı ve insanlara ulaşmanın en iyi yolu oldu
      https://carolina.codes
    • Buradaki söylemin, startup web siteleri gösterişli olmamalı demek olduğunu sanmıyorum. Daha çok herkesin aynı görünmek zorunda olmadığı söyleniyor gibi
    • Clickbait küçük görseller için de aynısı geçerli. İnsanlar nefret ediyor ama clickbait olmayan küçük görsellere de tıklamıyorlar
    • YouTube’un para kazanma yönergeleri de bunu talep ediyor

  • Komik olan, burada yer alan tekniklerin bir zamanlar ancak üst düzey frontend geliştiricilerin ya da yayıncıların yapabileceği şeyler sayılması
    Eskiden yetkinlik simgesi olan şeylerin şimdi hiciv konusu haline gelmiş olmasına bakınca, bizim ileri seviye dediğimiz şeyin sonuçta “başkalarının yapamadığı şey”den çıktığını düşündürüyor. Şahsen ASCII sanat animasyonunu nasıl yapacağımı hiç düşünmemiştim

    • Karmaşık grafik tasarımlarını gerçekten hayata geçirebilmekle gurur duyan biri olarak küçük bir kimlik krizi yaşadığım da doğru
      Ama sonuçta bu insanı, AI’ın hâlâ zorlandığı şeyleri aramaya itiyor ve şu anda bu, benim işimi artık herkesin üretebildiği şeylerden ayırmaya devam ediyor. Kameranın ortaya çıkmasından sonra gerçekçilikten empresyonizme geçişe benziyor
    • Eskiden iş ispatı gibi işliyordu ama daha sonra ucuz baskı devreler piyasayı doldurunca bu emek önemsizleşti; buna benziyor
    • Bunun “yapamamak”tan çok yaratıcılıkla ilgili olduğunu düşünüyorum

  • Bunun hem komik hem de gerçekten çok iyi yapılmış olmasını seviyorum
    Dürüst olmak gerekirse bazı bileşenleri gerçekten kullanmak isterdim; özellikle ASCII art harika

    • Ben de aynısını yazacaktım. Buradakilerden birkaçını kesinlikle ben de yaptım
      Listede olmayan onlarcası daha aklıma geliyor ama herkesin bildiği şeylerin böyle iyi derlenmiş olması ferahlatıcı. Yapımcısını alkışlarım

  • En uç erdem sinyallemesi, her şeyi tamamen tarayıcı varsayılanlarında bırakıp hiç stil eklememek olurdu
    Sanki Series A’de 1 milyar dolar almışsın ama serçe parmağını Shift tuşuna götürmeye üşendiğin için her şeyi küçük harfle yazıyorsun

    • https://www.berkshirehathaway.com/
    • Yorum yazarken doğru büyük-küçük harf, virgül, dilbilgisi ve yazımı neredeyse hiç umursamıyorum; bunun ana nedeni LLM olmadığımın sinyalini vermek
    • “Erdem sinyallemesi” yerine counter-signaling daha doğru olabilir: https://en.wikipedia.org/wiki/Countersignaling
      “Counter-signaling, bir özelliğe en çok sahip olan aktörlerin, aynı özelliğe orta düzeyde sahip bireylere göre o özelliği kanıtlamaya daha az yatırım yapması davranışıdır” anlamına geliyor
    • Bu erdem sinyallemesinden çok sadece orijinal hali değil mi?
      https://www.berkshirehathaway.com/
    • Bunu en iyi Netscape bilir

  • Fiilen bir parodi kütüphanesi olmasına rağmen hepsi oldukça profesyonel görünüyor

    • Daha sonra fikir ve ilham almak için bunu kesinlikle yer imlerime ekleyeceğim. Utanç verici olsa da fark etmez
    • O halde birkaç yıl sonra “profesyonel” görünüm muhtemelen epey farklı görünecek
    • Bunu gerçek üründe kullanan bir şirket çıkma olasılığı sizce ne kadar?
    • Bir süreci tiye almak, o sürecin incelikli olmadığı anlamına gelmez
      Bir şeyle şaka yapabilmek için genelde onu birbiriyle bağlantılı şekilde anlamış olmak gerekir
    • Hatta bu, tüm özensiz startup sayfalarının ne kadar öngörülebilir ve birbirine benzediğini gösteriyor olabilir

  • Sinir bozucu popover’ın kendi belgelerini kaydırırken neden otomatik olarak görünmediğini anlamıyorum
    Daha fazla IntersectionObserver lazım. Bileşen özelliğinin adının selfArmTrigger gibi olması ekstra puan kazandırırdı

  • “TokenStream – server-sent events (SSE), 2008’de HTML5 spesifikasyonuna eklendi ama 2025’e kadar kullanılmadı.”
    Chunked transfer encoding’in 1997’de çıktığını hatırlıyorum. O zamandan beri, bugün insanların LLM’lerde gördüğü gibi metin baytlarını ya da HTML parçalarını kolayca ve anında stream etmek mümkündü
    1997’de bununla web tabanlı bir Telnet istemcisi yaptım, sonra da web için metin tabanlı MOO/sohbet geliştirdim. İkisinde de frameset kullandım; gönderim satırı ekranın altında duruyordu, gelen satırlar ise sunucuda bir şey oldukça sunucu tarafından gönderiliyor ve yeni satır geldikçe istemci kaydırılıyordu
    Ondan önce de suistimal edilebilecek teknikler vardı ama güvenilirlikleri düşüktü. Yine de gerçekten kimsenin kullanmadığı teknolojilerden söz ediyorsak anlatacak çok şeyim var

    • COMET zamanının gerçekten çok ötesindeydi. Sierra Online bunu 1995’te web sohbeti için kullandı ve yıllarca açık ara en iyi web sohbetiydi

  • Bu klişelerin genelini anlıyorum ve belki sadece yaşlandım ama Claude’un bu tür UI’ları benim yapabileceğimden 100 kat hızlı üretmesi hâlâ epey etkileyici geliyor
    Belki de AI’dan önce bu kalite seviyesinde bir UI bile yapamıyor olmamdandır (˶ˆᗜˆ˵)

  • 2017/18’deki ICO patlaması sırasında, token satış pazarlama sitelerinde animasyonlu grafik düğümü arka planı şarttı
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Kullanmak isteyenler için GitHub bağlantısını ekledim. Ben de kullanmayı düşünüyorum
    https://github.com/vorpus/performativeUI

    • Dur, README’m henüz yeterince gösterişli değil. Yıldız sayısı geçmişini gösteren bir grafik eklemem gerekecek galiba