Show HN : Performative-UI – bibliothèque de composants React basée sur les tropes du design

 (vorpus.github.io)
1 points par GN⁺ 4 시간 전 | 1 commentaires | Partager sur WhatsApp
  • Une collection de composants React AI-native pour startups IA, avec 27 composants et une licence MIT
  • Disponible publiquement, avec la commande d’installation npm install performative-ui
  • L’ensemble est classé en Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion
  • Des composants comme Prompt, TokenStream, LogoMarquee, PricingCard et WaitlistForm servent respectivement de champ de saisie de prompt, flux de tokens, logos, carte tarifaire et formulaire de liste d’attente
  • Chaque description de composant exprime en une courte formule les signaux de design utilisés sur les landing pages de startups IA : levées de fonds, noms de modèles, logos, chiffres et UI de conversion

Vue d’ensemble

  • Performative-UI est une collection publique de composants React AI-native pour startups IA, avec 27 composants et une licence MIT
  • La commande d’installation est npm install performative-ui
  • L’objectif des composants est de signaler à quel point un tour de financement a été sursouscrit

Liste des composants

  • Atoms

    • Sparkle : ajoute ✦ à n’importe quel nom commun pour lancer deux fois plus vite
    • GradientText : du texte en dégradé quand l’italique seul ne suffit pas à faire licorne
    • StatusDot : un point d’état toujours vert, même quand il ne devrait pas

  • Primitives

    • Button : un bouton conçu pour vous faire cliquer
    • EyebrowPill : l’endroit où mettre le nom du modèle quand on n’a plus rien à dire
    • Prompt : la zone de texte que tous les builders IA déploient au lieu d’expliquer la fonctionnalité du produit
    Publicité

  • Banners

    • StickyBanner : une annonce de levée de fonds déguisée en utilitaire

  • Heroes

    • Rotator : une accroche rotative pour quand dire « everything » ne paraît pas encore assez ambitieux
    • WordRoll : permet à Rotator d’étaler son champ d’action sans attendre que le visiteur tape
    • PromptHero : un hero qui remplace la proposition de valeur par un champ de texte
    • AsciiHero : un hero ASCII fait par des gens qui suivent la bonne newsletter, pour les hackers

  • Backgrounds

    • Aurora : un fond qui définit toute une génération avec trois blobs
    • NodeGraphBackground : un fond en graphe de nœuds qui est, conceptuellement, un réseau de neurones
    • FloatingSparkles : des paillettes flottantes pour rappeler que « la magie ne se lance pas toute seule »

  • Surfaces

    • GlassCard : Backdrop-filter: ambition
    • MockIDE : le vrai code arrive, ceci n’est qu’une bande-annonce
    Publicité

  • Conversation

    • ChatBubble : une bulle de chat où tout est forcément vrai puisque c’est dans une bulle
    • TokenStream : un flux de tokens rappelant que les Server-sent events (SSE) ont été ajoutés à la spécification HTML5 en 2008 mais n’ont servi qu’en 2025
    • ChatFAB : un FAB de chat qui signifie qu’il n’y a plus d’échappatoire

  • Social Proof

    • LogoMarquee : un carrousel de logos censé inspirer confiance à tous ceux que vous avez déjà entendus nommer, y compris ceux qui n’ont rien signé
    • LogoRow : des logos statiques quand on n’en a que six
    • StatCounter : un compteur partant du principe que des chiffres qui montent valent mieux que les autres
    • CommunityBadge : un badge communautaire où les stars sont le nouveau MAU

  • Pricing & Conversion

    • PricingCard : une carte tarifaire où l’on choisit celle du milieu parce qu’elle brille
    • BeforeAfter : à gauche, le chaos ; à droite, nous
    • WaitlistForm : un formulaire de liste d’attente pour capter la demande que vous avez vous-même créée
    • Popover : un popover conçu non pour le consentement, mais pour la conversion

À lire aussi

1 commentaires

 
GN⁺ 4 시간 전
Commentaires sur Hacker News

  • J’ai montré des sites simples, allant droit à l’essentiel, et sur plusieurs projets on m’a directement dit qu’ils n’étaient pas pris au sérieux parce qu’il leur manquait ce genre d’éléments d’UI performatifs
    C’est un peu comme se plaindre que les youtubeurs demandent sans arrêt aux gens de s’abonner. S’ils le font, c’est parce que statistiquement, ça marche

    • Au fond, c’est une question de première impression. Le design d’un site web, c’est la première impression d’une entreprise, et si le design est soigné, on a tendance à croire que le produit sera lui aussi soigné et solide
      Un peu comme penser qu’un objet cher est de meilleure qualité et globalement supérieur. Sur ce site, le meilleur composant est l’animation ASCII du hero, et pourtant c’est justement celui qu’on ne peut pas copier. C’est grâce à ce superbe hero ASCII que la première impression est bonne et que j’ai eu envie de parcourir tous les composants
    • J’utilise un site Substack pour la conférence que j’organise, et les pop-ups ainsi que les boutons d’abonnement disséminés partout m’agaçaient au début, mais en pratique ça fonctionne
      Même avec un site à faible trafic, on est passés de 0 à presque 1 000 abonnés, et c’est devenu le meilleur moyen d’atteindre les gens
      https://carolina.codes
    • Je ne pense pas que l’idée ici soit de dire que les sites de startup ne doivent pas être flamboyants. C’est plutôt qu’ils n’ont pas tous besoin de se ressembler
    • C’est pareil pour les miniatures putaclic. Les gens disent les détester, mais en pratique ils cliquent beaucoup moins sur des miniatures qui ne sont pas putaclic
    • Les règles de monétisation de YouTube l’exigent aussi

  • Ce qui est amusant, c’est que les techniques montrées ici faisaient autrefois partie de ce que seuls des développeurs frontend ou intégrateurs très avancés étaient censés pouvoir faire
    Voir que ce qui était autrefois un signe de maîtrise est maintenant matière à satire me fait penser que notre idée du haut niveau vient au fond de “ce que les autres ne savent pas faire”. Personnellement, je ne m’étais même jamais demandé comment on pourrait implémenter une animation en art ASCII

    • En tant que quelqu’un qui tirait de la fierté du fait de pouvoir concrétiser des designs graphiques complexes, ça m’a effectivement provoqué une petite crise d’identité
      Mais au final, ça pousse à aller vers ce que l’IA a encore du mal à faire, et c’est ce qui continue à distinguer mon travail de ce que tout le monde peut désormais générer. Ça me rappelle un peu le passage du réalisme à l’impressionnisme après l’arrivée de la photographie
    • Avant, ça fonctionnait un peu comme une preuve de travail, puis l’arrivée massive de circuits imprimés bon marché sur le marché a rendu cette quantité de travail dérisoire
    • J’y vois moins une question de “ne pas savoir faire” que de créativité

  • J’aime le fait que ce soit à la fois drôle et vraiment très bien réalisé
    Honnêtement, il y a plusieurs composants que j’aurais réellement envie d’utiliser, surtout l’art ASCII qui est excellent

    • J’allais dire exactement la même chose. Il y en a clairement quelques-uns ici que j’ai moi aussi déjà faits
      Des dizaines d’autres non listés me viennent à l’esprit, mais c’est rafraîchissant de voir quelque chose que tout le monde reconnaît aussi bien rassemblé. Bravo au créateur

  • La forme la plus extrême de signalement de vertu consiste à tout laisser en style navigateur par défaut, sans aucun habillage
    Un peu comme lever 1 milliard de dollars en série A tout en écrivant tout en minuscules parce qu’on a la flemme de tendre l’auriculaire jusqu’à la touche Shift

    • https://www.berkshirehathaway.com/
    • Quand j’écris des commentaires, je fais désormais à peine attention aux majuscules, aux virgules, à la grammaire ou à l’orthographe, principalement pour signaler que je ne suis pas un LLM
    • Plutôt que “signalement de vertu”, le terme contre-signalement (counter-signaling) est peut-être plus juste : https://en.wikipedia.org/wiki/Countersignaling
      « Le contre-signalement est l’action, pour les acteurs possédant le plus fortement un certain attribut, d’investir moins dans la démonstration de cet attribut que des individus le possédant à un niveau intermédiaire »
    • Plus qu’un signalement de vertu, ce n’est pas juste l’original ?
      https://www.berkshirehathaway.com/
    • Netscape le savait mieux que personne

  • C’est en gros une bibliothèque parodique, et pourtant tout a l’air assez professionnel

    • Je vais clairement la mettre en favoris pour piocher des idées et de l’inspiration plus tard. Peu importe si c’est honteux
    • Dans ce cas, dans quelques années, l’apparence “professionnelle” aura sans doute un tout autre visage
    • Quelle est la probabilité qu’une entreprise finisse par utiliser ça dans un vrai produit ?
    • Se moquer d’un processus ne veut pas dire que ce processus manque de sophistication
      Pour pouvoir traiter quelque chose sur le ton de la blague, il faut en général le comprendre comme un ensemble cohérent de choses reliées entre elles
    • Au contraire, ça montre peut-être à quel point toutes ces pages de startup maladroites sont prévisibles et se ressemblent

  • Je ne comprends pas pourquoi cette popover agaçante n’apparaît pas automatiquement quand on fait défiler sa propre documentation
    Il faut plus d’IntersectionObserver. Bonus si la prop du composant s’appelle quelque chose comme selfArmTrigger

  • « TokenStream – les événements envoyés par le serveur (SSE) ont été ajoutés à la spécification HTML5 en 2008, mais personne ne les a utilisés avant 2025. »
    Je me souviens que le chunked transfer encoding existait déjà en 1997. Dès cette époque, on pouvait déjà streamer facilement et immédiatement des octets de texte ou des fragments de HTML, comme ce que les gens voient aujourd’hui avec les LLM
    En 1997, j’ai construit avec ça un client Telnet web, puis plus tard un MOO/chat textuel pour le web. Les deux utilisaient des framesets, avec la ligne d’envoi en bas de l’écran, tandis que les lignes entrantes étaient poussées par le serveur à mesure que des événements survenaient côté serveur, en faisant défiler le client à chaque nouvelle ligne
    Il existait déjà avant cela des techniques qu’on pouvait détourner, mais elles étaient moins fiables. Cela dit, si on veut parler de technologies que personne n’a vraiment utilisées, j’ai de quoi dire

    • COMET était vraiment en avance sur son temps. Sierra Online l’utilisait pour son chat web en 1995, et c’était de loin le meilleur chat web pendant des années

  • Je comprends bien tous ces clichés, et c’est peut-être juste que je vieillis, mais je trouve encore assez impressionnant que Claude puisse produire ce genre d’UI 100 fois plus vite que moi
    Peut-être aussi qu’avant l’IA, je n’aurais même pas été capable de produire une UI de cette qualité (˶ˆᗜˆ˵)

  • Pendant le boom des ICO en 2017/18, les sites marketing de vente de tokens devaient absolument avoir un fond avec des nœuds de graphe animés
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Ajout du lien GitHub pour ceux qui veulent l’utiliser. Moi aussi, je pense m’en servir
    https://github.com/vorpus/performativeUI

    • Attends, mon README n’est pas encore assez performatif. Il faut que j’ajoute un graphique montrant l’évolution du nombre d’étoiles