Show HN: Performative-UI – डिज़ाइन ट्रोप-आधारित React कंपोनेंट लाइब्रेरी

 (vorpus.github.io)
1 पॉइंट द्वारा GN⁺ 4 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • AI startup के लिए AI-native React components का संग्रह, जिसमें 27 components और MIT license शामिल हैं
  • यह public release में है, और install command है npm install performative-ui
  • संरचना को Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion में वर्गीकृत किया गया है
  • Prompt, TokenStream, LogoMarquee, PricingCard, WaitlistForm जैसे components prompt input box, token stream, logo, pricing card, waitlist form का काम संभालते हैं
  • हर component का विवरण funding, model name, logo, numbers, conversion UI आदि जैसे AI startup landing page में इस्तेमाल होने वाले design signals को छोटे वाक्यों में व्यक्त करता है

अवलोकन

  • Performative-UI, public release में उपलब्ध AI startup के लिए AI-native React components का संग्रह है, जिसमें 27 components और MIT license शामिल हैं
  • install command है npm install performative-ui
  • components का उद्देश्य यह signal करना है कि funding round कितना oversubscribed था

कंपोनेंट सूची

  • Atoms

    • Sparkle: किसी भी noun के साथ ✦ जोड़कर उसे दोगुनी तेजी से ship करने वाला element
    • GradientText: जब सिर्फ italics unicorn स्तर के लिए काफी न हों, तब का gradient text
    • StatusDot: status dot जो तब भी हमेशा हरा रहता है जब होना नहीं चाहिए

  • Primitives

    • Button: ऐसा button जिसे click करवाने के लिए हिलने-डुलने वाला बनाया गया है
    • EyebrowPill: जब कहने को कुछ और न बचे, तब model name रखने की जगह
    • Prompt: product feature समझाने की जगह हर AI builder द्वारा deploy किया जाने वाला textarea
    विज्ञापन

  • Banners

    • StickyBanner: utility के रूप में छिपी funding news

  • Heroes

    • Rotator: जब सिर्फ “everything” कहना काफी ambitious न लगे, तब का rotating phrase
    • WordRoll: ऐसा WordRoll जो visitor के typing शुरू किए बिना भी Rotator की हद से ज़्यादा महत्वाकांक्षा दिखा दे
    • PromptHero: value proposition को text input से बदल देने वाला hero
    • AsciiHero: hackers के लिए, उन लोगों द्वारा बनाया गया ASCII hero जो सही newsletters follow करते हैं

  • Backgrounds

    • Aurora: तीन blobs से एक generation को define करने वाला background
    • NodeGraphBackground: conceptually neural network जैसा node graph background
    • FloatingSparkles: तैरती चमक जो कहती है, “जादू अपने-आप ship नहीं होता”

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: असली code बाद में आएगा, यह उसका trailer है
    विज्ञापन

  • Conversation

    • ChatBubble: chat bubble जिसमें लिखा हो तो वह ज़रूर सच माना जाएगा
    • TokenStream: token stream जो याद दिलाता है कि Server-sent events(SSE) 2008 के HTML5 spec में जुड़ गए थे, लेकिन 2025 तक इस्तेमाल नहीं हुए
    • ChatFAB: chat FAB जो बताता है कि अब निकलने का कोई रास्ता नहीं

  • Social Proof

    • LogoMarquee: logo marquee जिसे देखकर लगता है कि जिनका नाम सुना है वे सब भरोसा करते हैं, यहाँ तक कि जिन्होंने sign भी नहीं किया
    • LogoRow: static logo row, जब सिर्फ छह logos हों
    • StatCounter: counter जो मानता है कि बढ़ते हुए numbers, न बढ़ने वाले numbers से बेहतर हैं
    • CommunityBadge: community badge जहाँ Stars ही नए MAU हैं

  • Pricing & Conversion

    • PricingCard: pricing card जिसमें बीच वाला card चमकता है, इसलिए चुनाव भी उसी के मुताबिक होता है
    • BeforeAfter: बाईं तरफ chaos, दाईं तरफ हम
    • WaitlistForm: खुद पैदा की गई demand को समेटने वाला waitlist form
    • Popover: सहमति नहीं, conversion के लिए बनाया गया popover

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 4 시간 전
Hacker News की रायें

  • मैंने कई प्रोजेक्ट्स में खुद यह सुना है कि जब कोई साइट बहुत साधारण हो और सिर्फ़ ज़रूरी चीज़ें हों, तो लोग कहते हैं कि इसमें ऐसे दिखावटी UI elements नहीं हैं इसलिए इसे गंभीरता से लेना मुश्किल है
    यह कुछ वैसा ही है जैसे YouTuber दर्शकों के बार-बार subscribe करने की अपील से परेशान होते हैं। ऐसा इसलिए किया जाता है क्योंकि आँकड़ों के हिसाब से यह असरदार होता है

    • आख़िरकार यह पहले impression की बात है। वेबसाइट डिज़ाइन किसी कंपनी की पहली छाप होती है, और अगर डिज़ाइन साफ़-सुथरा हो तो लोग मान लेते हैं कि प्रोडक्ट भी उतना ही साफ़ और मज़बूत होगा
      यह वैसा ही है जैसे लोग मानते हैं कि महँगी चीज़ ज़्यादा high-quality और कुल मिलाकर बेहतर होगी। इस साइट पर hero section की ASCII animation सबसे अच्छी component है, लेकिन विडंबना यह है कि वही component कॉपी नहीं की जा सकती। उसी शानदार ASCII hero की वजह से पहला impression अच्छा बना और मैंने बाकी सभी components भी देखे
    • मैं अपने कॉन्फ़्रेंस के लिए Substack साइट इस्तेमाल करता हूँ। पहले pop-up और जगह-जगह के subscribe buttons परेशान करते थे, लेकिन वे सच में काम करते हैं
      कम traffic वाली साइट होने के बावजूद subscribers 0 से बढ़कर लगभग 1,000 हो गए, और लोगों तक पहुँचने का यह सबसे अच्छा तरीका बन गया
      https://carolina.codes
    • मेरा ख़याल है कि यहाँ बात यह नहीं है कि startup वेबसाइटें भड़कीली नहीं होनी चाहिए। बल्कि बात यह है कि सबको एक जैसा दिखने की ज़रूरत नहीं है
    • Clickbait thumbnails भी ऐसे ही हैं। लोग उनसे नफ़रत करते हैं, लेकिन जो thumbnails clickbait नहीं होते उन पर वे उतना क्लिक भी नहीं करते
    • YouTube की monetization guidelines भी उसी की माँग करती हैं

  • मज़ेदार बात यह है कि यहाँ दिखाई गई तकनीकें कभी ऐसी चीज़ें मानी जाती थीं जो सिर्फ़ बहुत advanced frontend developers या publishers ही कर सकते थे
    जो चीज़ कभी कौशल की निशानी थी, वही अब व्यंग्य का विषय बन गई है। इससे लगता है कि जिस उन्नत स्तर की हम बात करते हैं, वह आख़िरकार अक्सर “जो दूसरे नहीं कर सकते” वहीं से आता है। मैंने तो व्यक्तिगत रूप से कभी यह भी नहीं सोचा था कि ASCII art animation को कैसे implement किया जाए

    • एक ऐसे इंसान के रूप में जिसे कभी इस बात पर गर्व था कि वह complex graphic design को सच में implement कर सकता है, इसमें थोड़ी पहचान का संकट जैसा एहसास ज़रूर हुआ
      लेकिन आख़िरकार यह मुझे उन चीज़ों की तरफ़ ले जाता है जिन्हें AI अभी भी मुश्किल पाता है, और वही चीज़ें मेरे काम को उन चीज़ों से अलग बनाए रखती हैं जिन्हें अब कोई भी generate कर सकता है। यह कुछ वैसा लगता है जैसे कैमरा आने के बाद realism से impressionism की तरफ़ बढ़ना
    • यह पहले proof of work जैसा काम करता था, लेकिन बाद में जैसे सस्ते printed circuits बाज़ार में भर गए और उस मेहनत का महत्व कम हो गया, वैसा ही कुछ
    • यह “नहीं कर सकता” से ज़्यादा creativity के करीब की बात लगती है

  • यह बात मुझे पसंद आई कि यह मज़ेदार भी है और वाक़ई बहुत अच्छी तरह बनाया भी गया है
    सच कहूँ तो कुछ components मैं वास्तव में इस्तेमाल करना चाहूँगा, ख़ासकर ASCII art कमाल का है

    • मैं भी यही कहने वाला था। यहाँ मौजूद कुछ चीज़ें ऐसी हैं जो मैंने भी निश्चित रूप से की हैं
      सूची में न होने वाली दर्जनों और चीज़ें भी याद आ रही हैं, लेकिन जो बातें सब पहचानते हैं उन्हें इस तरह इतनी अच्छी तरह समेटना ताज़गीभरा है। बनाने वाले को सलाम

  • Virtue signaling का सबसे चरम रूप तो यह होगा कि सब कुछ पूरी तरह browser defaults पर छोड़ दिया जाए और कोई styling ही न डाली जाए
    जैसे आपने Series A में 1 बिलियन डॉलर जुटा लिए हों, फिर भी सिर्फ़ इसलिए सब कुछ lowercase में लिखें कि छोटी उँगली से Shift key दबाना भी ज़्यादा मेहनत लगे

    • https://www.berkshirehathaway.com/
    • मैं comments लिखते समय सही capitalization, commas, grammar और spelling की अब लगभग परवाह नहीं करता, और उसका मुख्य कारण यह है कि मैं यह संकेत देना चाहता हूँ कि मैं LLM नहीं हूँ
    • Virtue signaling से ज़्यादा सही शब्द शायद counter-signaling होगा: https://en.wikipedia.org/wiki/Countersignaling
      “Counter-signaling वह व्यवहार है जिसमें किसी गुण को सबसे अधिक रखने वाला actor, उसी गुण को मध्यम स्तर पर रखने वाले व्यक्ति की तुलना में उसे साबित करने में कम निवेश करता है”
    • Virtue signaling से ज़्यादा यह बस मूल रूप जैसा नहीं है क्या?
      https://www.berkshirehathaway.com/
    • Netscape यह सबसे अच्छी तरह जानता है

  • यह लगभग एक parody library है, फिर भी सब कुछ काफ़ी professional दिखता है

    • बाद में ideas और inspiration लेने के लिए मैं इसे पक्का bookmark करूँगा। शर्मिंदगी हो तो हो
    • अगर ऐसा है, तो कुछ साल बाद “professional” का दृश्य रूप काफ़ी अलग लग सकता है
    • असली product में इसे इस्तेमाल करने वाली कोई कंपनी निकलने की कितनी संभावना है?
    • किसी process का मज़ाक उड़ाने का मतलब यह नहीं कि वह process sophisticated नहीं है
      किसी चीज़ को मज़ाक में पेश करने के लिए आम तौर पर ज़रूरी है कि आप उसे आपस में जुड़े हुए तरीके से अच्छी तरह समझते हों
    • बल्कि यह दिखा सकता है कि तमाम अधपकी startup pages कितनी predictable और एक जैसी हैं

  • समझ नहीं आता कि यह परेशान करने वाला popover अपने ही documentation को scroll करते समय अपने-आप क्यों नहीं आता
    और ज़्यादा IntersectionObserver चाहिए। अगर component prop का नाम selfArmTrigger जैसा हो तो बोनस अंक भी दिए जा सकते हैं

  • “TokenStream – server-sent events (SSE) को 2008 में HTML5 spec में जोड़ा गया था, लेकिन 2025 तक उसका इस्तेमाल नहीं हुआ।”
    मुझे याद है कि chunked transfer encoding 1997 में आ गई थी। उसी समय से टेक्स्ट bytes या HTML fragments को वैसे ही आसानी से और तुरंत stream किया जा सकता था जैसा आज लोग LLMs में देखते हैं
    1997 में मैंने इससे एक web-based Telnet client बनाया था, और बाद में web के लिए text MOO/chat भी बनाया। दोनों में frameset इस्तेमाल किया गया था ताकि भेजी जाने वाली lines स्क्रीन के नीचे रहें, और आने वाली lines server side पर कुछ होते ही server भेज दे, साथ ही नई line आते ही client scroll हो जाए
    उससे पहले भी दुरुपयोग किए जा सकने वाले कुछ तरीके थे, लेकिन वे भरोसेमंद नहीं थे। फिर भी अगर बात ऐसी technology की है जिसे सच में किसी ने इस्तेमाल नहीं किया, तो उस पर मैं बहुत कुछ कह सकता हूँ

    • COMET अपने समय से बहुत आगे था। Sierra Online ने 1995 में web chat के लिए इसका इस्तेमाल किया था, और कई सालों तक वह निस्संदेह सबसे बेहतरीन web chat था

  • मैं इन तमाम clichés को समझता हूँ, और हो सकता है कि मैं बस बूढ़ा हो रहा हूँ, लेकिन यह अब भी काफ़ी प्रभावशाली है कि Claude ऐसे UI मुझसे 100 गुना तेज़ी से निकाल देता है
    शायद इसलिए भी कि AI से पहले मैं इस स्तर की quality वाला UI भी नहीं बना पाता था (˶ˆᗜˆ˵)

  • 2017/18 के ICO boom के दौरान token sale marketing sites में animated graph node background लगभग ज़रूरी होता था
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • जो लोग इसे इस्तेमाल करना चाहते हैं उनके लिए मैंने GitHub link जोड़ दिया है। मैं भी इसे इस्तेमाल करने वाला हूँ
    https://github.com/vorpus/performativeUI

    • एक मिनट, मेरा README अभी काफ़ी performative नहीं है। मुझे इसमें stars की संख्या का रिकॉर्ड दिखाने वाला chart जोड़ना चाहिए