Show HN: Performative-UI – thư viện component React dựa trên các motif thiết kế

 (vorpus.github.io)
2 điểm bởi GN⁺ 4 ngày trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Bộ sưu tập component React AI-native dành cho startup AI, cung cấp 27 component và giấy phép MIT
  • Đang được công khai rộng rãi, lệnh cài đặt là npm install performative-ui
  • Cấu trúc được phân loại thành Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion
  • Các component như Prompt, TokenStream, LogoMarquee, PricingCard, WaitlistForm đảm nhiệm ô nhập prompt, luồng token, logo, thẻ giá và biểu mẫu danh sách chờ
  • Mô tả của từng component diễn đạt bằng các câu ngắn những tín hiệu thiết kế thường dùng trên landing page của startup AI như gọi vốn, tên model, logo, con số và UI chuyển đổi

Tổng quan

  • Performative-UI là bộ sưu tập component React AI-native dành cho startup AI, đang được công khai rộng rãi, cung cấp 27 component và giấy phép MIT
  • Lệnh cài đặt là npm install performative-ui
  • Mục đích của các component là phát đi tín hiệu về việc vòng gọi vốn đã được đăng ký vượt mức bao nhiêu

Danh sách component

  • Atoms

    • Sparkle: thành phần gắn ✦ vào bất kỳ danh từ nào để ra mắt nhanh gấp đôi
    • GradientText: chữ gradient cho những lúc chỉ in nghiêng thôi vẫn chưa đủ đạt đẳng cấp tỷ đô
    • StatusDot: chấm trạng thái luôn màu xanh kể cả khi không nên như vậy

  • Primitives

    • Button: nút được làm cho chuyển động để bạn phải bấm vào
    • EyebrowPill: chỗ để đặt tên model khi đã hết điều để nói
    • Prompt: textarea mà mọi AI builder đều triển khai thay vì giải thích tính năng sản phẩm

  • Banners

    • StickyBanner: tin gọi vốn ngụy trang thành tiện ích

  • Heroes

    • Rotator: câu chữ xoay vòng cho những lúc chỉ nói “everything” vẫn chưa đủ tham vọng
    • WordRoll: khoe độ bao phủ của Rotator mà không cần đợi khách truy cập gõ gì
    • PromptHero: hero thay thế value proposition bằng ô nhập văn bản
    • AsciiHero: hero ASCII dành cho hacker, do những người theo dõi đúng bản tin tạo ra

  • Backgrounds

    • Aurora: nền định nghĩa cả một thế hệ chỉ với ba blob
    • NodeGraphBackground: nền đồ thị nút về mặt khái niệm là mạng nơ-ron
    • FloatingSparkles: hiệu ứng lấp lánh trôi nổi với thông điệp “phép màu không tự mình ra mắt sản phẩm”

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: mã thực tế đang trên đường tới, còn đây là trailer

  • Conversation

    • ChatBubble: bong bóng chat mà đã nằm trong đó thì chắc chắn là thật
    • TokenStream: luồng token nhắc rằng Server-sent events (SSE) đã được thêm vào đặc tả HTML5 từ năm 2008 nhưng mãi đến 2025 mới được dùng
    • ChatFAB: nút FAB chat cho thấy giờ đã không còn lối thoát

  • Social Proof

    • LogoMarquee: marquee logo nói rằng mọi cái tên bạn từng nghe tới đều tin dùng, kể cả những bên chưa ký
    • LogoRow: dãy logo tĩnh dùng khi chỉ có sáu logo
    • StatCounter: bộ đếm nơi con số đi lên luôn tốt hơn con số không đi lên
    • CommunityBadge: badge cộng đồng với thông điệp Stars là MAU mới

  • Pricing & Conversion

    • PricingCard: thẻ giá nơi thẻ ở giữa phát sáng nên bạn sẽ chọn theo đúng ý đồ
    • BeforeAfter: bên trái là hỗn loạn, bên phải là chúng tôi
    • WaitlistForm: biểu mẫu danh sách chờ để chứa nhu cầu do chính mình tạo ra
    • Popover: popover tạo ra để chuyển đổi chứ không phải để xin đồng ý

Bài viết liên quan

1 bình luận

 
GN⁺ 4 ngày trước
Ý kiến trên Hacker News

  • Tôi đã trực tiếp nghe điều này ở nhiều dự án: khi cho họ xem một trang web đơn giản, chỉ có những thứ cốt lõi, họ lại nói rằng vì thiếu các yếu tố UI phô diễn kiểu này nên họ không xem nó là nghiêm túc
    Cũng giống như việc người xem YouTube than phiền rằng các YouTuber cứ liên tục kêu gọi đăng ký vậy. Họ làm thế vì xét theo thống kê thì nó có hiệu quả

    • Cuối cùng thì đây là vấn đề của ấn tượng ban đầu. Thiết kế website là ấn tượng đầu tiên về công ty, và nếu thiết kế gọn gàng thì người ta sẽ tin rằng sản phẩm cũng gọn gàng và chắc chắn
      Cũng giống như việc nghĩ rằng món đồ đắt tiền hơn thì chất lượng cao hơn và nhìn chung tốt hơn. Trên trang này, component hay nhất là ASCII animation ở phần hero, nhưng trớ trêu là chính component đó lại không copy được. Nhờ phần hero ASCII ngầu đó mà ấn tượng ban đầu tốt lên, khiến tôi xem qua toàn bộ các component
    • Tôi đang dùng trang Substack cho hội nghị mình vận hành, và trước đây tôi thấy các popup cùng những nút đăng ký rải rác khắp nơi khá khó chịu, nhưng thực tế là chúng có hiệu quả
      Dù là một trang có lượng truy cập thấp, số người đăng ký vẫn tăng từ 0 lên gần 1.000, và nó trở thành cách tốt nhất để tiếp cận mọi người
      https://carolina.codes
    • Có lẽ ý ở đây không phải là website startup không nên hào nhoáng. Chỉ là không nhất thiết tất cả phải trông giống hệt nhau
    • Thumbnail clickbait cũng vậy. Mọi người ghét nó, nhưng lại không mấy khi bấm vào thumbnail không clickbait
    • Nguyên tắc kiếm tiền của YouTube cũng đòi hỏi điều đó

  • Điều thú vị là những kỹ thuật ở đây từng được xem là thứ chỉ các frontend developer hoặc publisher trình độ cao mới làm được
    Nhìn việc thứ từng là biểu tượng của tay nghề giờ trở thành đối tượng châm biếm, tôi thấy cái gọi là trình độ cao rốt cuộc thường đến từ việc “người khác không làm được”. Cá nhân tôi thậm chí chưa từng nghĩ xem sẽ triển khai animation ASCII art như thế nào

    • Ở góc độ một người từng tự hào vì có thể hiện thực hóa các thiết kế đồ họa phức tạp, đúng là tôi cũng có một chút khủng hoảng bản sắc
      Nhưng rốt cuộc điều đó lại khiến tôi đi tìm những thứ mà AI vẫn còn thấy khó, và đó sẽ tiếp tục là điểm phân biệt công việc của tôi với những gì giờ đây ai cũng có thể tạo ra. Cảm giác hơi giống sự chuyển dịch từ chủ nghĩa hiện thực sang trường phái ấn tượng sau khi máy ảnh xuất hiện
    • Trước đây nó từng hoạt động như một dạng bằng chứng công sức, nhưng rồi khi các mạch in giá rẻ tràn ngập thị trường, khối lượng công việc đó trở nên tầm thường
    • Tôi nghĩ câu chuyện này gần với tính sáng tạo hơn là “không làm được”

  • Tôi thích ở chỗ thứ này vừa buồn cười vừa được làm rất tốt
    Thành thật mà nói, có vài component tôi thực sự muốn dùng, đặc biệt là phần ASCII art rất xuất sắc

    • Tôi cũng định nói đúng câu đó. Trong đống này có vài thứ chắc chắn tôi cũng từng làm
      Tôi còn nghĩ ra được hàng chục thứ khác không có trong danh sách, nhưng cách tác giả tổng hợp rất gọn những thứ ai cũng nhận ra khiến nó trở nên mới mẻ. Xin dành một tràng pháo tay cho tác giả

  • Mức phô diễn đức hạnh cực đoan nhất là để mọi thứ hoàn toàn ở mặc định trình duyệt và không thêm chút style nào cả
    Kiểu như vừa gọi vốn Series A được 1 tỷ đô mà vẫn lười đưa ngón út lên phím Shift nên viết toàn chữ thường

    • https://www.berkshirehathaway.com/
    • Khi viết bình luận, tôi giờ gần như không để tâm tới viết hoa đúng chuẩn, dấu phẩy, ngữ pháp hay chính tả nữa, mà lý do chính là để phát tín hiệu rằng tôi không phải LLM
    • Có lẽ counter-signaling sẽ là từ đúng hơn là “phô diễn đức hạnh”: https://en.wikipedia.org/wiki/Countersignaling
      Nghĩa là “counter-signaling là hành vi trong đó tác nhân sở hữu một thuộc tính ở mức cao nhất đầu tư ít hơn vào việc chứng minh thuộc tính đó so với những cá nhân chỉ sở hữu nó ở mức trung bình”
    • Có khi đây không phải phô diễn đức hạnh mà chỉ là hàng nguyên bản thôi chăng?
      https://www.berkshirehathaway.com/
    • Netscape biết điều này rõ nhất

  • Dù về cơ bản là một thư viện parody, mọi thứ vẫn trông khá chuyên nghiệp

    • Tôi chắc chắn sẽ bookmark lại để sau này lấy ý tưởng và cảm hứng. Có xấu hổ cũng không sao
    • Nếu vậy thì vài năm nữa, vẻ ngoài được coi là “chuyên nghiệp” có lẽ sẽ khác đi khá nhiều
    • Xác suất sẽ có công ty nào đó dùng cái này cho sản phẩm thật là bao nhiêu?
    • Chế giễu một quy trình không có nghĩa là quy trình đó không tinh vi
      Muốn đùa cợt về thứ gì đó thì thông thường bạn phải hiểu nó theo cách các phần của nó kết nối với nhau
    • Ngược lại, có khi nó chỉ cho thấy mọi trang startup vụng về đều dễ đoán và giống nhau đến mức nào

  • Tôi không hiểu vì sao những popover khó chịu lại không tự động hiện ra khi người ta cuộn chính tài liệu của nó
    Cần thêm IntersectionObserver. Nếu tên prop của component là kiểu selfArmTrigger thì tôi còn cho thêm điểm thưởng nữa

  • “TokenStream – server-sent events (SSE) đã được thêm vào đặc tả HTML5 từ năm 2008 nhưng mãi đến 2025 mới được dùng.”
    Tôi nhớ chunked transfer encoding đã có từ năm 1997. Từ thời điểm đó, người ta đã có thể stream byte văn bản hoặc các mảnh HTML một cách dễ dàng và ngay lập tức, đúng kiểu những gì ngày nay mọi người thấy ở LLM
    Năm 1997 tôi đã dùng nó để làm một Telnet client chạy trên web, và sau đó còn làm cả MOO/chat văn bản cho web. Cả hai đều dùng frameset: dòng gửi đi đặt ở cuối màn hình, còn dòng đi vào thì được server đẩy sang mỗi khi phía server có việc xảy ra, đồng thời khiến client cuộn xuống khi có dòng mới
    Trước đó cũng có vài kỹ thuật có thể lạm dụng, nhưng độ tin cậy thấp hơn. Dù vậy, nếu nói về công nghệ thật sự không ai dùng thì tôi còn có nhiều điều để kể lắm

    • COMET thực sự đi trước thời đại. Sierra Online đã dùng nó cho webchat vào năm 1995, và trong nhiều năm đó là webchat tốt nhất, bỏ xa phần còn lại

  • Tôi hiểu toàn bộ mớ khuôn mẫu này, và có thể là tôi chỉ đang già đi thôi, nhưng việc Claude tạo ra UI kiểu này nhanh hơn tôi 100 lần vẫn khá ấn tượng
    Có lẽ cũng vì trước thời AI, ngay cả UI ở mức chất lượng này tôi cũng không làm được (˶ˆᗜˆ˵)

  • Trong thời kỳ bùng nổ ICO 2017/18, nền đồ thị node có animation là thứ bắt buộc phải có trên các trang marketing bán token
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Tôi đã thêm link GitHub cho những ai muốn dùng. Tôi cũng định dùng nó
    https://github.com/vorpus/performativeUI

    • Khoan đã, README của tôi vẫn chưa đủ tính phô diễn. Tôi phải thêm một biểu đồ hiển thị lịch sử số sao mới được