Show HN: Performative-UI – pustaka komponen React berbasis trope desain

 (vorpus.github.io)
2 poin oleh GN⁺ 4 hari lalu | 1 komentar | Bagikan ke WhatsApp
  • Kumpulan komponen React AI-native untuk startup AI, menyediakan 27 komponen dan lisensi MIT
  • Sudah tersedia untuk publik, dengan perintah instalasi npm install performative-ui
  • Terdiri dari Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion
  • Komponen seperti Prompt, TokenStream, LogoMarquee, PricingCard, dan WaitlistForm menangani kolom input prompt, aliran token, logo, kartu harga, dan formulir daftar tunggu
  • Deskripsi tiap komponen mengekspresikan secara singkat sinyal desain yang dipakai di landing page startup AI, seperti pendanaan, nama model, logo, angka, dan UI konversi

Ikhtisar

  • Performative-UI adalah kumpulan komponen React AI-native untuk startup AI yang tersedia untuk publik, menyediakan 27 komponen dan lisensi MIT
  • Perintah instalasinya adalah npm install performative-ui
  • Tujuan komponennya adalah memberi sinyal seberapa oversubscribed putaran pendanaannya

Daftar komponen

  • Atoms

    • Sparkle: elemen yang menambahkan ✦ ke kata benda apa pun agar peluncurannya dua kali lebih cepat
    • GradientText: teks gradasi saat huruf miring saja tidak cukup terasa bernilai miliaran dolar
    • StatusDot: titik status yang selalu hijau bahkan saat tidak semestinya

  • Primitives

    • Button: tombol yang dibuat bergerak agar diklik
    • EyebrowPill: tempat menaruh nama model saat tidak ada lagi yang ingin dikatakan
    • Prompt: textarea yang dipasang semua pembuat AI alih-alih menjelaskan fungsi produk

  • Banners

    • StickyBanner: berita pendanaan yang menyamar sebagai utilitas

  • Heroes

    • Rotator: teks berputar saat hanya mengatakan “everything” belum cukup ambisius
    • WordRoll: pamer cakupan ala Rotator tanpa membuat pengunjung menunggu pengetikan
    • PromptHero: hero yang mengganti proposisi nilai dengan input teks
    • AsciiHero: hero ASCII untuk hacker, dibuat oleh orang-orang yang mengikuti newsletter yang tepat

  • Backgrounds

    • Aurora: latar belakang yang mendefinisikan satu generasi hanya dengan tiga blob
    • NodeGraphBackground: latar belakang grafik node yang secara konsep adalah jaringan saraf
    • FloatingSparkles: kilau melayang yang berkata “keajaiban tidak diluncurkan dengan sendirinya”

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: kode aslinya menyusul, ini baru trailernya

  • Conversation

    • ChatBubble: gelembung chat yang pasti benar jika ada di dalam balon percakapan
    • TokenStream: aliran token bahwa Server-sent events (SSE) ditambahkan ke spesifikasi HTML5 pada 2008 tetapi baru dipakai pada 2025
    • ChatFAB: chat FAB yang berarti sekarang tidak ada jalan keluar

  • Social Proof

    • LogoMarquee: marquee logo yang menyatakan semua pihak yang pernah Anda dengar mempercayainya, termasuk yang belum menandatangani
    • LogoRow: logo statis untuk saat Anda hanya punya enam logo
    • StatCounter: penghitung yang tahu angka yang naik lebih baik daripada angka yang tidak naik
    • CommunityBadge: badge komunitas yang percaya Stars adalah MAU yang baru

  • Pricing & Conversion

    • PricingCard: kartu harga yang dipilih sesuai cahaya kartu tengah
    • BeforeAfter: kiri adalah kekacauan, kanan adalah kami
    • WaitlistForm: formulir daftar tunggu untuk menampung permintaan yang diciptakan sendiri
    • Popover: popover yang dibuat untuk konversi, bukan persetujuan

Bacaan terkait

1 komentar

 
GN⁺ 4 hari lalu
Komentar Hacker News

  • Saya pernah langsung mendengar di beberapa proyek bahwa ketika saya menunjukkan situs yang sederhana dan hanya berisi inti, orang tidak menganggapnya serius karena tidak ada elemen UI yang performatif seperti ini
    Mirip seperti penonton YouTuber yang terus diminta untuk subscribe. Mereka melakukannya karena secara statistik memang efektif

    • Pada akhirnya ini soal kesan pertama. Desain website adalah kesan pertama sebuah perusahaan, dan kalau desainnya rapi, orang jadi percaya produknya juga rapi dan kokoh
      Mirip seperti anggapan bahwa barang mahal pasti kualitasnya lebih tinggi dan secara keseluruhan lebih baik. Di situs ini, komponen terbaiknya adalah animasi ASCII di area hero, tapi justru komponen itu tidak bisa disalin. ASCII hero yang keren itu memberi kesan pertama yang bagus, jadi saya terdorong untuk menelusuri semua komponennya
    • Saya memakai situs Substack untuk konferensi yang saya jalankan, dan popup serta tombol subscribe di mana-mana dulu terasa mengganggu, tapi ternyata memang efektif
      Meski trafik situsnya rendah, jumlah subscriber naik dari 0 menjadi hampir 1.000, dan itu jadi cara terbaik untuk menjangkau orang
      https://carolina.codes
    • Sepertinya maksudnya bukan bahwa website startup tidak boleh terlihat meriah. Hanya saja, semuanya tidak harus terlihat sama
    • Thumbnail clickbait juga sama. Orang-orang membencinya, tapi thumbnail yang bukan clickbait justru tidak banyak diklik
    • Panduan monetisasi YouTube juga menuntut hal itu

  • Menariknya, teknik-teknik yang muncul di sini dulu dianggap sebagai hal yang hanya bisa dilakukan oleh developer frontend atau publisher tingkat tinggi
    Sesuatu yang dulu menjadi simbol keahlian kini menjadi sasaran parodi, dan itu membuat saya berpikir bahwa apa yang kita sebut tingkat lanjut pada akhirnya berasal dari “hal yang tidak bisa dilakukan orang lain”. Secara pribadi, saya bahkan belum pernah memikirkan bagaimana cara membuat animasi ASCII art

    • Dari sudut pandang orang yang dulu bangga bisa benar-benar mengimplementasikan desain grafis yang kompleks, memang ada sedikit krisis identitas
      Tapi pada akhirnya ini mendorong kita mencari hal-hal yang masih sulit bagi AI, dan itulah yang terus membedakan pekerjaan saya dari hal-hal yang sekarang bisa dihasilkan siapa saja. Rasanya mirip dengan pergeseran dari realisme ke impresionisme setelah kamera muncul
    • Dulu ini berfungsi seperti bukti kerja, tapi kemudian jumlah kerja itu menjadi sepele ketika papan sirkuit cetak murah membanjiri pasar
    • Menurut saya ini lebih dekat ke soal kreativitas daripada sekadar “tidak bisa melakukannya”

  • Saya suka karena ini lucu tapi juga benar-benar dibuat dengan sangat baik
    Jujur saja, ada beberapa komponen yang benar-benar ingin saya pakai, terutama ASCII art-nya yang luar biasa

    • Saya juga mau bilang hal yang sama. Beberapa hal di sini jelas pernah saya lakukan sendiri
      Saya bisa memikirkan puluhan hal lain yang tidak ada di daftar, tapi menyegarkan melihat sesuatu yang semua orang paham berhasil dirangkum sebaik ini. Tepuk tangan untuk pembuatnya

  • Bentuk virtue signaling yang paling ekstrem adalah membiarkan semuanya sepenuhnya default browser tanpa styling sama sekali
    Seperti mendapat pendanaan Seri A sebesar 1 miliar dolar tapi terlalu malas menggerakkan jari kelingking ke tombol Shift sehingga semuanya ditulis huruf kecil

    • https://www.berkshirehathaway.com/
    • Saat menulis komentar saya jadi hampir tidak peduli lagi pada kapitalisasi, koma, tata bahasa, dan ejaan yang benar, terutama karena saya ingin memberi sinyal bahwa saya bukan LLM
    • Mungkin istilah yang lebih tepat daripada “virtue signaling” adalah counter-signaling: https://en.wikipedia.org/wiki/Countersignaling
      “Counter-signaling adalah perilaku ketika pihak yang paling banyak memiliki suatu atribut justru berinvestasi lebih sedikit untuk membuktikan atribut itu dibandingkan orang yang memiliki atribut tersebut pada tingkat menengah”
    • Daripada virtue signaling, bukankah ini cuma yang asli?
      https://www.berkshirehathaway.com/
    • Netscape yang paling tahu soal itu

  • Meski pada dasarnya ini perpustakaan parodi, semuanya tetap terlihat cukup profesional

    • Saya pasti akan menandainya untuk nanti mencari ide dan inspirasi. Tidak masalah kalau itu memalukan
    • Kalau begitu, dalam beberapa tahun lagi tampilan “profesional” mungkin akan terlihat cukup berbeda
    • Seberapa besar kemungkinan akan ada perusahaan yang memakai ini di produk nyata?
    • Mengejek sebuah proses tidak berarti proses itu tidak canggih
      Untuk bisa menjadikannya bahan lelucon, biasanya kita harus memahaminya dengan cara yang saling terhubung
    • Bisa jadi ini justru menunjukkan betapa mudah ditebak dan miripnya semua halaman startup yang setengah matang

  • Saya tidak mengerti kenapa popover yang menyebalkan tidak otomatis muncul saat orang menggulir dokumennya sendiri
    Kita butuh lebih banyak IntersectionObserver. Bonus poin kalau nama properti komponennya sesuatu seperti selfArmTrigger

  • “TokenStream – server-sent events (SSE) ditambahkan ke spesifikasi HTML5 pada 2008, tetapi tidak dipakai sampai 2025.”
    Saya ingat chunked transfer encoding muncul pada 1997. Sejak saat itu sebenarnya sudah mudah untuk melakukan streaming byte teks atau potongan HTML secara langsung, seperti yang sekarang dilihat orang pada LLM
    Pada 1997 saya membuat klien Telnet berbasis web dengan itu, lalu kemudian juga membuat MOO/chat teks untuk web. Keduanya memakai frameset, dengan baris kirim di bagian bawah layar, sementara baris masuk dikirim server setiap kali ada kejadian di sisi server, dan klien di-scroll saat baris baru masuk
    Bahkan sebelumnya pun sudah ada teknik-teknik yang bisa disalahgunakan, hanya saja kurang andal. Tapi kalau mau bicara tentang teknologi yang benar-benar tidak dipakai siapa pun, saya punya banyak hal untuk diceritakan

    • COMET benar-benar terlalu maju untuk zamannya. Sierra Online memakainya untuk web chat pada 1995, dan selama bertahun-tahun itu adalah web chat terbaik tanpa tanding

  • Saya paham klise-klise seperti ini secara umum, dan mungkin saya memang cuma sudah tua, tapi tetap mengesankan bahwa Claude bisa mengeluarkan UI seperti ini 100 kali lebih cepat daripada saya
    Mungkin karena sebelum AI pun saya tidak bisa membuat UI dengan kualitas seperti ini (˶ˆᗜˆ˵)

  • Saat booming ICO pada 2017/18, latar node graf animasi adalah elemen wajib untuk situs marketing penjualan token
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Saya menambahkan link GitHub untuk orang-orang yang ingin memakainya. Saya sendiri juga berniat memakainya
    https://github.com/vorpus/performativeUI

    • Tunggu, README saya masih belum cukup performatif. Saya harus menambahkan grafik yang menampilkan riwayat jumlah bintang