Show HN: Performative-UI – ไลบรารีคอมโพเนนต์ React ที่อิงทรอปด้านดีไซน์

 (vorpus.github.io)
2 คะแนน โดย GN⁺ 4 일 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ชุดรวม คอมโพเนนต์ React แบบ AI-native สำหรับสตาร์ตอัป AI พร้อมคอมโพเนนต์ 27 ตัวและไลเซนส์ MIT
  • เปิดให้ใช้งานทั่วไปแล้ว โดยคำสั่งติดตั้งคือ npm install performative-ui
  • โครงสร้างแบ่งเป็น Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof และ Pricing & Conversion
  • คอมโพเนนต์อย่าง Prompt, TokenStream, LogoMarquee, PricingCard, WaitlistForm ทำหน้าที่เป็น ช่องป้อนพรอมป์ต์, สตรีมโทเค็น, โลโก้, การ์ดราคา และฟอร์มรายชื่อรอ
  • คำอธิบายของแต่ละคอมโพเนนต์ถ่ายทอด สัญญะด้านดีไซน์ ที่ใช้ในหน้าแลนดิ้งเพจของสตาร์ตอัป AI เช่น เงินทุน ชื่อโมเดล โลโก้ ตัวเลข และ UI เพื่อการคอนเวอร์ชัน ด้วยข้อความสั้น ๆ

ภาพรวม

  • Performative-UI เป็นชุดคอมโพเนนต์ React แบบ AI-native สำหรับสตาร์ตอัป AI ที่เปิดให้ใช้งานทั่วไป พร้อมคอมโพเนนต์ 27 ตัวและไลเซนส์ MIT
  • คำสั่งติดตั้งคือ npm install performative-ui
  • เป้าหมายของคอมโพเนนต์คือส่งสัญญาณว่ารอบระดมทุนมีคนจองเกินมากแค่ไหน

รายการคอมโพเนนต์

  • Atoms

    • Sparkle: องค์ประกอบที่เติม ✦ ต่อท้ายคำนามอะไรก็ได้เพื่อให้เปิดตัวได้เร็วขึ้นสองเท่า
    • GradientText: ข้อความไล่เฉดสำหรับเวลาที่แค่ตัวเอียงยังดูไม่ยูนิคอร์นพอ
    • StatusDot: จุดสถานะที่เป็นสีเขียวเสมอ แม้จะไม่ควรเป็นก็ตาม

  • Primitives

    • Button: ปุ่มที่ถูกทำให้ขยับเพื่อชวนให้กด
    • EyebrowPill: ตำแหน่งสำหรับใส่ชื่อโมเดลเมื่อไม่มีอะไรจะพูดแล้ว
    • Prompt: textarea ที่ AI builder ทุกคนปล่อยออกมาแทนการอธิบายว่าผลิตภัณฑ์ทำอะไร

  • Banners

    • StickyBanner: ข่าวระดมทุนที่ปลอมตัวมาเป็นยูทิลิตี

  • Heroes

    • Rotator: ข้อความหมุนสำหรับเวลาที่การพูดว่า “everything” ยังฟังดูทะเยอทะยานไม่พอ
    • WordRoll: โชว์ขอบเขตอันกว้างของ Rotator ได้โดยไม่ต้องให้ผู้เข้าชมรอการพิมพ์
    • PromptHero: ฮีโร่ที่แทนที่คุณค่าของผลิตภัณฑ์ด้วยช่องป้อนข้อความ
    • AsciiHero: ASCII hero ที่ทำโดยคนซึ่งติดตามนิวส์เลตเตอร์ที่เหมาะสม สำหรับแฮ็กเกอร์

  • Backgrounds

    • Aurora: พื้นหลังที่นิยามทั้งยุคสมัยด้วย blob สามก้อน
    • NodeGraphBackground: พื้นหลังกราฟโหนดที่ในเชิงแนวคิดก็คือโครงข่ายประสาท
    • FloatingSparkles: ประกายลอยฟุ้งที่บอกว่า “เวทมนตร์ไม่ได้เปิดตัวตัวเอง”

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: โค้ดจริงกำลังมา และนี่คือทีเซอร์

  • Conversation

    • ChatBubble: บับเบิลแชตที่ถ้าอยู่ในกรอบคำพูดก็ต้องเป็นความจริงแน่นอน
    • TokenStream: สตรีมโทเค็นที่บอกว่า Server-sent events (SSE) ถูกเพิ่มในสเปก HTML5 ตั้งแต่ปี 2008 แต่เพิ่งถูกใช้งานในปี 2025
    • ChatFAB: ปุ่มแชต FAB ที่หมายความว่าตอนนี้ไม่มีทางหนีแล้ว

  • Social Proof

    • LogoMarquee: แถบโลโก้เลื่อนที่บอกว่าทุกเจ้าที่คุณเคยได้ยินชื่อไว้วางใจเรา รวมถึงเจ้าที่ไม่ได้เซ็นด้วย
    • LogoRow: โลโก้แบบนิ่งสำหรับเวลาที่มีโลโก้อยู่แค่หกอัน
    • StatCounter: ตัวนับที่ยืนยันว่าตัวเลขที่เพิ่มขึ้นดีกว่าตัวเลขที่ไม่เพิ่ม
    • CommunityBadge: ป้ายชุมชนที่บอกว่า Stars คือ MAU แบบใหม่

  • Pricing & Conversion

    • PricingCard: การ์ดราคาที่ให้คุณเลือกตามแสงเรืองของการ์ดตรงกลาง
    • BeforeAfter: ด้านซ้ายคือความโกลาหล ด้านขวาคือเรา
    • WaitlistForm: ฟอร์มรายชื่อรอไว้รองรับดีมานด์ที่สร้างขึ้นมาเอง
    • Popover: ป๊อปโอเวอร์ที่ทำมาเพื่อคอนเวอร์ชัน ไม่ใช่เพื่อความยินยอม

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 4 일 전
ความคิดเห็นจาก Hacker News

  • เคยเอาเว็บไซต์ที่เรียบง่ายและมีแต่แก่นสารให้ดู แล้วก็ได้ยินจากหลายโปรเจ็กต์โดยตรงว่าคนไม่ค่อยมองมันอย่างจริงจังเพราะไม่มี องค์ประกอบ UI แบบโชว์เหนือ พวกนี้
    มันคล้ายกับการที่คนดู YouTuber บ่นว่าชอบขอให้กดติดตามอยู่เรื่อย ๆ เหตุผลที่ทำก็เพราะในเชิงสถิติมันได้ผล

    • สุดท้ายมันคือเรื่องของ ความประทับใจแรก เว็บไซต์คือความประทับใจแรกของบริษัท และถ้างานออกแบบดูเนี้ยบ คนก็จะเชื่อว่าสินค้าก็น่าจะเนี้ยบและแข็งแรงด้วย
      คล้ายกับการคิดว่าของแพงกว่าย่อมคุณภาพดีกว่าและโดยรวมดีกว่า ในเว็บนี้คอมโพเนนต์ที่ดีที่สุดคือ แอนิเมชัน ASCII ในส่วนฮีโร่ แต่กลับคัดลอกคอมโพเนนต์นั้นไม่ได้ พอมี ASCII ฮีโร่เท่ ๆ แบบนั้น ความประทับใจแรกเลยดีจนผมไล่ดูคอมโพเนนต์ทั้งหมด
    • ผมใช้ Substack site สำหรับคอนเฟอเรนซ์ที่จัดอยู่ ตอนแรกป๊อปอัปกับปุ่มสมัครรับที่โผล่ไปทั่วก็น่ารำคาญ แต่ใช้งานจริงแล้วมันได้ผล
      แม้จะเป็นเว็บที่ทราฟฟิกต่ำ แต่ผู้ติดตามเพิ่มจาก 0 เป็นเกือบ 1,000 คน และกลายเป็นวิธีที่ดีที่สุดในการเข้าถึงผู้คน
      https://carolina.codes
    • เหมือนประเด็นที่พูดตรงนี้ไม่ใช่ว่าเว็บไซต์สตาร์ตอัปห้ามดูหวือหวา แค่คงกำลังบอกว่าไม่จำเป็นต้อง หน้าตาเหมือนกันหมด
    • ภาพปกคลิกเบต ก็เหมือนกัน คนไม่ชอบแต่พอไม่ใช่คลิกเบตก็ไม่ค่อยกดกัน
    • แนวทางสร้างรายได้ ของ YouTube ก็เรียกร้องแบบนั้นเหมือนกัน

  • สิ่งที่น่าสนใจคือเทคนิคที่อยู่ตรงนี้ ครั้งหนึ่งเคยถูกมองว่าเป็นของที่มีแค่นักพัฒนาฟรอนต์เอนด์หรือคนทำเว็บระดับสูงเท่านั้นที่ทำได้
    พอเห็นสิ่งที่เคยเป็นสัญลักษณ์ของฝีมือกลายมาเป็นเป้าล้อเลียน ก็ทำให้รู้สึกว่าระดับ ขั้นสูง ที่เราพูดถึงกัน สุดท้ายก็มาจาก “สิ่งที่คนอื่นทำไม่ได้” ผมเองไม่เคยคิดด้วยซ้ำว่าจะทำแอนิเมชัน ASCII art แบบนี้ยังไง

    • ในฐานะคนที่เคยภูมิใจกับการทำกราฟิกดีไซน์ซับซ้อนให้เกิดขึ้นจริง ก็ยอมรับว่ามันทำให้เกิด วิกฤตอัตลักษณ์ นิดหน่อย
      แต่สุดท้ายมันก็ผลักให้เราไปหาอะไรที่ AI ยังทำได้ยาก และตอนนี้นั่นแหละที่ยังแยกงานของผมออกจากสิ่งที่ใคร ๆ ก็สร้างได้ เหมือนการเปลี่ยนผ่านจากสัจนิยมไปสู่อิมเพรสชันนิสม์หลังจากกล้องถ่ายรูปถือกำเนิดขึ้น
    • เมื่อก่อนมันทำหน้าที่คล้าย หลักฐานของการลงแรง แต่หลังจากวงจรพิมพ์ราคาถูกทะลักเข้าสู่ตลาด ปริมาณงานแบบนั้นก็กลายเป็นเรื่องเล็กน้อยไป
    • ผมว่าเรื่องนี้ใกล้กับ ความคิดสร้างสรรค์ มากกว่าคำว่า “ทำไม่ได้”

  • ชอบตรงที่มันทั้งตลกและทำออกมาได้ดีมากจริง ๆ
    พูดตามตรงมีบางคอมโพเนนต์ที่ผมอยากใช้จริง โดยเฉพาะ ASCII art ที่ยอดเยี่ยมมาก

    • ผมก็จะพูดแบบเดียวกันนี่แหละ มีบางอย่างในนี้ที่ผมเคยทำจริงแน่นอน
      ยังนึกของที่ไม่ได้อยู่ในลิสต์ได้อีกหลายสิบอย่าง แต่การที่เอาสิ่งที่ทุกคนรู้กันอยู่แล้วมาจัดระเบียบได้ดีขนาดนี้มันสดใหม่มาก ขอปรบมือให้ผู้สร้าง

  • การ แสดงคุณธรรมให้คนเห็น แบบสุดโต่งที่สุดคือปล่อยทุกอย่างเป็นค่าเริ่มต้นของเบราว์เซอร์และไม่ใส่สไตล์อะไรเลย
    เหมือนระดมทุนซีรีส์ A ได้ 1 พันล้านดอลลาร์แล้ว แต่ขี้เกียจยกนิ้วก้อยไปกด Shift จนพิมพ์ตัวเล็กทั้งหมด

    • https://www.berkshirehathaway.com/
    • ตอนเขียนคอมเมนต์ ผมแทบไม่สนใจตัวพิมพ์เล็กใหญ่ เครื่องหมายจุลภาค ไวยากรณ์ หรือการสะกดให้ถูกนัก และเหตุผลหลักก็เพื่อส่งสัญญาณว่าผม ไม่ใช่ LLM
    • บางทีคำที่เหมาะอาจไม่ใช่ “การแสดงคุณธรรม” แต่เป็น การส่งสัญญาณย้อนกลับ (counter-signaling) มากกว่า: https://en.wikipedia.org/wiki/Countersignaling
      ความหมายคือ “การที่ผู้เล่นซึ่งมีคุณสมบัติบางอย่างสูงที่สุด ลงทุนพิสูจน์คุณสมบัตินั้นน้อยกว่าคนที่มีคุณสมบัติเดียวกันในระดับปานกลาง”
    • มากกว่าจะเป็นการแสดงคุณธรรม มันก็แค่ต้นฉบับไม่ใช่หรือ?
      https://www.berkshirehathaway.com/
    • Netscape รู้เรื่องนี้ดีที่สุด

  • ทั้งที่จริง ๆ แล้วมันแทบจะเป็นไลบรารีล้อเลียน แต่ทุกอย่างกลับดู เป็นมืออาชีพ มากทีเดียว

    • เดี๋ยวผมจะบุ๊กมาร์กไว้แน่ ๆ เผื่อเอาไว้หยิบไอเดียและแรงบันดาลใจทีหลัง จะน่าอายก็ไม่เป็นไร
    • ถ้าอย่างนั้น อีกไม่กี่ปีภาพลักษณ์ของคำว่า “เป็นมืออาชีพ” ก็คงจะดูต่างออกไปมาก
    • โอกาสที่จะมีบริษัทเอาสิ่งนี้ไปใช้กับสินค้าจริงมีมากแค่ไหนกัน?
    • การล้อเลียนกระบวนการ ไม่ได้แปลว่ากระบวนการนั้น ไม่ประณีต
      จะเอาอะไรสักอย่างมาทำเป็นมุกได้ โดยทั่วไปก็ต้องเข้าใจมันแบบที่องค์ประกอบต่าง ๆ เชื่อมโยงกันอยู่แล้ว
    • หรือบางทีมันอาจกำลังแสดงให้เห็นว่าหน้าเว็บสตาร์ตอัปแย่ ๆ ทั้งหลาย คาดเดาได้และคล้ายกันแค่ไหน

  • ผมไม่เข้าใจเลยว่าทำไมป๊อปโอเวอร์ชวนหงุดหงิดถึงไม่เด้งขึ้นมาเองเวลาคุณเลื่อนอ่านเอกสารของมัน
    เราต้องการ IntersectionObserver มากกว่านี้ ชื่อพร็อพคอมโพเนนต์ถ้าเป็นอะไรอย่าง selfArmTrigger ก็ให้คะแนนพิเศษได้เลย

  • “TokenStream – server-sent events (SSE) ถูกเพิ่มเข้าไปในสเปก HTML5 ตั้งแต่ปี 2008 แต่กว่าจะมีคนใช้ก็ปี 2025”
    ผมยังจำได้ว่า chunked transfer encoding ออกมาตั้งแต่ปี 1997 ตอนนั้นก็สตรีม text bytes หรือชิ้นส่วน HTML ได้ง่ายและตรงไปตรงมาแล้ว แบบเดียวกับที่ทุกวันนี้คนเห็นกันใน LLM
    ปี 1997 ผมทำ Telnet client บนเว็บด้วยมัน และต่อมาก็ทำ MOO/แชตแบบข้อความสำหรับเว็บด้วย ทั้งสองอย่างใช้ frameset โดยให้บรรทัดสำหรับพิมพ์อยู่ด้านล่างของหน้าจอ ส่วนบรรทัดขาเข้าก็ให้เซิร์ฟเวอร์ส่งมาเมื่อมีอะไรเกิดขึ้นฝั่งเซิร์ฟเวอร์ แล้วสั่งให้ไคลเอนต์เลื่อนตามเมื่อมีบรรทัดใหม่เข้ามา
    ก่อนหน้านั้นก็มีเทคนิคที่เอาไปใช้แบบพิเรนทร์ได้อยู่บ้าง แต่ความน่าเชื่อถือต่ำ ถ้าจะพูดถึงเทคโนโลยีที่ไม่มีใครใช้จริง ๆ ผมมีอะไรจะเล่าอีกเยอะ

    • COMET ล้ำยุคเกินเวลาไปมาก Sierra Online ใช้มันกับเว็บแชตตั้งแต่ปี 1995 และมันเป็นเว็บแชตที่ดีที่สุดแบบทิ้งห่างอยู่หลายปี

  • โดยรวมผมเข้าใจคลิเช่พวกนี้นะ และบางทีผมอาจจะแก่เองก็ได้ แต่การที่ Claude ปั่น UI แบบนี้ออกมาได้เร็วกว่าเวลาที่ผมทำเองถึง 100 เท่า มันก็ยังน่าทึ่งอยู่ดี
    หรืออาจเป็นเพราะก่อนยุค AI ผมเองก็ทำ UI คุณภาพระดับนี้ไม่ได้อยู่แล้วก็ได้ (˶ˆᗜˆ˵)

  • ตอนกระแส ICO boom ช่วงปี 2017/18 ฉากหลังแบบโหนดกราฟเคลื่อนไหวเป็นของจำเป็นสำหรับเว็บการตลาดขายโทเคน
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • เพิ่มลิงก์ GitHub ไว้ให้สำหรับคนที่อยากใช้แล้วนะ ผมเองก็ว่าจะใช้เหมือนกัน
    https://github.com/vorpus/performativeUI

    • เดี๋ยวก่อน README ของผมยังดูโชว์เหนือไม่พอ ต้องเพิ่มกราฟโชว์สถิติจำนวนดาวเสียแล้ว