Show HN: Performative-UI – React-Komponentenbibliothek auf Basis von Design-Tropen

 (vorpus.github.io)
1 Punkte von GN⁺ 4 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Eine Sammlung AI-nativer React-Komponenten für AI-Startups mit 27 Komponenten und MIT-Lizenz
  • Öffentlich verfügbar; Installationsbefehl: npm install performative-ui
  • Die Struktur ist in Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof sowie Pricing & Conversion gegliedert
  • Komponenten wie Prompt, TokenStream, LogoMarquee, PricingCard und WaitlistForm übernehmen Prompt-Eingabefeld, Token-Stream, Logos, Pricing-Karten und Wartelistenformular
  • Die Beschreibung jeder Komponente formuliert Design-Signale, die auf Landingpages von AI-Startups verwendet werden, in kurzen Slogans – etwa zu Funding, Modellnamen, Logos, Zahlen und Conversion-UI

Überblick

  • Performative-UI ist eine öffentlich verfügbare Sammlung AI-nativer React-Komponenten für AI-Startups und bietet 27 Komponenten unter MIT-Lizenz
  • Installationsbefehl: npm install performative-ui
  • Ziel der Komponenten ist es, zu signalisieren, wie stark eine Finanzierungsrunde überzeichnet war

Komponentenliste

  • Atoms

    • Sparkle: Das Element, das an jedes Nomen ein ✦ anhängt, damit doppelt so schnell gelauncht wird
    • GradientText: Gradient-Text für den Fall, dass Kursivschrift allein nicht nach Einhorn im Milliardenbereich aussieht
    • StatusDot: Ein Statuspunkt, der immer grün ist, auch wenn er es nicht sein sollte

  • Primitives

    • Button: Ein Button, der so animiert ist, dass man ihn klicken muss
    • EyebrowPill: Der Platz für den Modellnamen, wenn sonst nichts mehr zu sagen ist
    • Prompt: Das textarea, das jeder AI-Builder ausliefert, statt die Produktfunktion zu erklären
    Anzeige

  • Banners

  • Heroes

    • Rotator: Rotierender Text für den Fall, dass nur „everything“ zu sagen nicht ambitioniert genug ist
    • WordRoll: Gibt mit der Reichweite von Rotator an, ohne dass Besucher auf Tipp-Animationen warten müssen
    • PromptHero: Ein Hero, das das Value Proposition durch eine Texteingabe ersetzt
    • AsciiHero: ASCII-Hero für Hacker, gemacht von Leuten, die die richtigen Newsletter abonnieren

  • Backgrounds

    • Aurora: Ein Hintergrund, der mit drei Blobs eine ganze Generation definiert
    • NodeGraphBackground: Ein Node-Graph-Hintergrund, der konzeptionell ein neuronales Netz ist
    • FloatingSparkles: Schwebende Glitzerpartikel mit der Aussage „Magie launcht sich nicht von selbst“

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: Der echte Code kommt noch, das hier ist der Trailer
    Anzeige

  • Conversation

    • ChatBubble: Eine Chat-Blase, in der alles zwangsläufig wahr ist
    • TokenStream: Ein Token-Stream mit dem Hinweis, dass Server-sent events (SSE) zwar 2008 in die HTML5-Spezifikation aufgenommen wurden, aber bis 2025 nicht benutzt wurden
    • ChatFAB: Ein Chat-FAB, aus dem es jetzt kein Entkommen mehr gibt

  • Social Proof

    • LogoMarquee: Eine Logo-Marquee dafür, dass alles, wovon man je gehört hat, Vertrauen ausspricht – auch ohne Unterschrift
    • LogoRow: Ein statisches Logo-Layout für den Fall, dass es nur sechs Logos gibt
    • StatCounter: Ein Counter für die Wahrheit, dass steigende Zahlen besser sind als nicht steigende
    • CommunityBadge: Ein Community-Badge, in dem Stars das neue MAU sind

  • Pricing & Conversion

    • PricingCard: Eine Pricing-Karte, bei der man passend zur leuchtenden mittleren Karte auswählt
    • BeforeAfter: Links das Chaos, rechts wir
    • WaitlistForm: Ein Wartelistenformular für selbst erzeugte Nachfrage
    • Popover: Ein Popover, gebaut nicht für Zustimmung, sondern für Conversion

Verwandte Beiträge

1 Kommentare

 
GN⁺ 4 시간 전
Hacker-News-Kommentare

  • Ich habe bei mehreren Projekten direkt gehört, dass eine einfache Website, die sich auf das Wesentliche konzentriert, nicht ernst genommen wird, wenn solche performativen UI-Elemente fehlen
    Das ist ähnlich wie bei YouTubern, deren Zuschauer sich darüber beschweren, dass sie ständig zum Abonnieren aufgefordert werden. Der Grund ist, dass es statistisch funktioniert

    • Letztlich geht es um den ersten Eindruck. Das Webdesign ist der erste Eindruck eines Unternehmens, und wenn das Design sauber wirkt, glaubt man eher, dass auch das Produkt sauber und solide ist
      So ähnlich wie man teure Dinge automatisch für hochwertiger und insgesamt besser hält. Auf dieser Website ist die ASCII-Animation im Hero-Bereich die beste Komponente, aber ausgerechnet diese Komponente lässt sich nicht kopieren. Gerade wegen dieses großartigen ASCII-Heroes war mein erster Eindruck positiv, sodass ich mir alle Komponenten angesehen habe
    • Ich nutze für eine Konferenz, die ich betreibe, eine Substack-Website, und die Pop-ups und überall verteilten Abo-Buttons haben mich früher gestört, aber sie funktionieren tatsächlich
      Obwohl die Website wenig Traffic hat, ist die Zahl der Abonnenten von 0 auf fast 1.000 gestiegen, und es ist der beste Weg geworden, Leute zu erreichen
      https://carolina.codes
    • Ich glaube nicht, dass hier gesagt werden soll, Startup-Websites dürften nicht auffällig sein. Es geht eher darum, dass nicht alle gleich aussehen müssen
    • Bei Clickbait-Thumbnails ist es genauso. Die Leute sagen, dass sie sie hassen, aber auf Thumbnails ohne Clickbait klicken sie dann auch nicht
    • Auch die Monetarisierungsrichtlinien von YouTube verlangen genau das

  • Interessant ist, dass die hier gezeigten Techniken einmal als Dinge galten, die nur fortgeschrittene Frontend-Entwickler oder Publisher umsetzen konnten
    Wenn man sieht, wie etwas, das früher ein Zeichen von Können war, jetzt zur Zielscheibe von Satire geworden ist, kommt man ins Grübeln, ob das, was wir als fortgeschrittenes Niveau bezeichnen, am Ende einfach daraus entsteht, „etwas zu können, das andere nicht können“. Ich persönlich habe mir nie Gedanken darüber gemacht, wie man eine ASCII-Art-Animation umsetzen würde

    • Als jemand, der früher stolz darauf war, komplexes Grafikdesign tatsächlich implementieren zu können, hat das bei mir schon eine kleine Identitätskrise ausgelöst
      Aber letztlich treibt es einen dazu, nach Dingen zu suchen, die für AI noch schwierig sind, und genau das unterscheidet meine Arbeit weiterhin von dem, was inzwischen jeder generieren kann. Es fühlt sich ein bisschen an wie der Übergang vom Realismus zum Impressionismus nach dem Aufkommen der Kamera
    • Früher hatte das etwas von einem Arbeitsnachweis, aber später wurden gedruckte Schaltungen so billig auf den Markt geworfen, dass dieser Arbeitsaufwand belanglos wirkte
    • Ich würde sagen, es geht weniger um „nicht können“ als um Kreativität

  • Ich mag, dass das zugleich witzig und wirklich sehr gut gemacht ist
    Ehrlich gesagt würde ich einige der Komponenten tatsächlich benutzen, besonders die ASCII-Art ist großartig

    • Genau das wollte ich auch sagen. Ein paar Dinge hier habe ich definitiv selbst schon gemacht
      Mir fallen noch Dutzende ein, die nicht auf der Liste stehen, aber es ist erfrischend, das alles so gut zusammengefasst zu sehen, obwohl jeder sofort weiß, worum es geht. Applaus an den Ersteller

  • Die extremste Form von Virtue Signaling ist es, alles komplett bei den Browser-Defaults zu belassen und überhaupt kein Styling hinzuzufügen
    So, als hätte man in Series A 1 Milliarde Dollar eingesammelt, sei aber zu bequem, den kleinen Finger bis zur Shift-Taste zu bewegen, und schreibe deshalb alles klein

    • https://www.berkshirehathaway.com/
    • Beim Schreiben von Kommentaren achte ich inzwischen kaum noch auf korrekte Groß- und Kleinschreibung, Kommas, Grammatik oder Rechtschreibung, hauptsächlich um zu signalisieren, dass ich kein LLM bin
    • Vielleicht passt Counter-Signaling besser als „Virtue Signaling“: https://en.wikipedia.org/wiki/Countersignaling
      Es bedeutet, dass „Akteure mit besonders viel von einer Eigenschaft weniger darin investieren, diese Eigenschaft zu beweisen, als Personen mit nur mittlerem Ausmaß derselben Eigenschaft“
    • Ist das nicht eher einfach das Original als Virtue Signaling?
      https://www.berkshirehathaway.com/
    • Netscape weiß das am besten

  • Obwohl es im Grunde eine Parodie-Bibliothek ist, wirkt alles ziemlich professionell

    • Das werde ich mir definitiv für später bookmarken, um Ideen und Inspiration zu sammeln. Ist mir egal, wenn das peinlich ist
    • Dann wird in ein paar Jahren vermutlich auch das, was „professionell“ aussieht, ziemlich anders wirken
    • Wie hoch ist wohl die Wahrscheinlichkeit, dass irgendein Unternehmen das tatsächlich in einem echten Produkt einsetzt?
    • Sich über einen Prozess lustig zu machen heißt nicht, dass dieser Prozess nicht ausgefeilt ist
      Um etwas als Witz behandeln zu können, muss man es normalerweise auf eine zusammenhängende Weise verstanden haben
    • Vielleicht zeigt es eher, wie vorhersehbar und ähnlich all die halbgar gemachten Startup-Seiten sind

  • Ich verstehe nicht, warum ein nerviges Popover nicht automatisch erscheint, wenn man durch die eigene Dokumentation scrollt
    Wir brauchen mehr IntersectionObserver. Bonuspunkte gäbe es, wenn die Komponenten-Property selfArmTrigger heißt

  • „TokenStream – Server-Sent Events (SSE) wurden 2008 zur HTML5-Spezifikation hinzugefügt, aber bis 2025 nicht genutzt.“
    Ich erinnere mich noch daran, dass Chunked Transfer Encoding schon 1997 aufkam. Damit konnte man schon damals problemlos und sofort Text-Bytes oder HTML-Fragmente streamen, ähnlich wie Leute es heute bei LLMs sehen
    Ich habe 1997 damit einen webbasierten Telnet-Client gebaut und später auch textbasierte MOO-/Chat-Anwendungen fürs Web. Beide nutzten ein Frameset: Die Eingabezeile war unten auf dem Bildschirm, und eingehende Zeilen wurden vom Server jeweils dann geschickt, wenn serverseitig etwas passierte; wenn eine neue Zeile eintraf, scrollte der Client weiter
    Auch davor gab es schon Techniken, die man missbrauchen konnte, aber sie waren unzuverlässiger. Wenn es wirklich um Technologien geht, die kaum jemand genutzt hat, könnte ich noch viel mehr erzählen

    • COMET war seiner Zeit wirklich weit voraus. Sierra Online hat es 1995 für Webchat eingesetzt, und jahrelang war das mit Abstand der beste Webchat

  • Ich verstehe diese ganzen Klischees, und vielleicht bin ich einfach alt, aber ich finde es immer noch ziemlich beeindruckend, dass Claude so eine UI 100-mal schneller ausspuckt, als ich es könnte
    Vielleicht liegt es auch daran, dass ich selbst vor AI nicht einmal eine UI dieser Qualität hätte bauen können (˶ˆᗜˆ˵)

  • Während des ICO-Booms 2017/18 war ein Hintergrund mit animierten Graph-Knoten auf Marketingseiten für Token-Verkäufe praktisch Pflicht
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Für alle, die es nutzen wollen, habe ich den GitHub-Link ergänzt. Ich habe auch vor, es zu benutzen
    https://github.com/vorpus/performativeUI

    • Moment, meine README ist noch nicht performativ genug. Ich sollte wohl noch ein Diagramm hinzufügen, das den Verlauf der Sternchenzahl zeigt