Show HN: Performative-UI – biblioteca de componentes React basada en tropos de diseño

 (vorpus.github.io)
2 puntos por GN⁺ 4 일 전 | 1 comentarios | Compartir por WhatsApp
  • Colección de componentes React AI-native para startups de IA, con 27 componentes y licencia MIT
  • Está disponible públicamente, y el comando de instalación es npm install performative-ui
  • La estructura se clasifica en Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion
  • Componentes como Prompt, TokenStream, LogoMarquee, PricingCard y WaitlistForm se encargan del campo de entrada de prompts, flujo de tokens, logos, tarjeta de precios y formulario de lista de espera
  • La descripción de cada componente expresa en frases cortas las señales de diseño usadas en landing pages de startups de IA, como rondas de financiamiento, nombres de modelos, logos, cifras e interfaces de conversión

Resumen

  • Performative-UI es una colección pública de componentes React AI-native para startups de IA, con 27 componentes y licencia MIT
  • El comando de instalación es npm install performative-ui
  • El objetivo de los componentes es señalar qué tan sobre suscrita estuvo una ronda de financiamiento

Lista de componentes

  • Atoms

    • Sparkle: el elemento que añade ✦ a cualquier sustantivo para lanzar el producto el doble de rápido
    • GradientText: texto con degradado para cuando solo la cursiva no alcanza para verse como una empresa de mil millones de dólares
    • StatusDot: el punto de estado que siempre está en verde, incluso cuando no debería

  • Primitives

    • Button: botón hecho para moverse y hacerte clic
    • EyebrowPill: el lugar donde va el nombre del modelo cuando ya no hay nada más que decir
    • Prompt: el textarea que toda startup de IA publica en lugar de explicar qué hace su producto

  • Banners

    • StickyBanner: noticia de financiamiento disfrazada de utilidad

  • Heroes

    • Rotator: texto rotativo para cuando decir “everything” no suena lo bastante ambicioso
    • WordRoll: presume el alcance de Rotator aunque el visitante no espere a que se escriba
    • PromptHero: hero que reemplaza la propuesta de valor con una caja de texto
    • AsciiHero: hero ASCII hecho por gente que sigue el newsletter correcto, para hackers

  • Backgrounds

    • Aurora: fondo que define a toda una generación con tres blobs
    • NodeGraphBackground: fondo de grafo de nodos que conceptualmente es una red neuronal
    • FloatingSparkles: brillos flotantes que dicen “la magia no se lanza sola”

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: el código real viene en camino; esto es el avance

  • Conversation

    • ChatBubble: burbuja de chat que debe ser verdad solo porque está dentro de una burbuja
    • TokenStream: flujo de tokens que recuerda que los Server-sent events (SSE) se añadieron a la especificación HTML5 en 2008, pero nadie los usó hasta 2025
    • ChatFAB: el FAB de chat que deja claro que ya no hay escapatoria

  • Social Proof

    • LogoMarquee: marquesina de logos que dice que confían en ti todos los que conoces, incluso los que no firmaron
    • LogoRow: logos estáticos para cuando solo tienes seis
    • StatCounter: contador que demuestra que los números que suben se ven mejor que los que no
    • CommunityBadge: insignia de comunidad donde los Stars son el nuevo MAU

  • Pricing & Conversion

    • PricingCard: tarjeta de precios donde eliges la del centro porque es la que brilla
    • BeforeAfter: a la izquierda, caos; a la derecha, nosotros
    • WaitlistForm: formulario de lista de espera para capturar la demanda que tú mismo inventaste
    • Popover: popover hecho para convertir, no para pedir consentimiento

Lecturas relacionadas

1 comentarios

 
GN⁺ 4 일 전
Comentarios en Hacker News

  • He mostrado sitios simples y centrados en lo esencial, y en varios proyectos me dijeron directamente que no los tomaban en serio porque les faltaban este tipo de elementos de UI performativos
    Es parecido a quejarse de que los youtubers piden que te suscribas todo el tiempo. Lo hacen porque, estadísticamente, funciona

    • Al final, es una cuestión de primera impresión. El diseño de un sitio web es la primera impresión de una empresa, y si el diseño se ve limpio, la gente tiende a creer que el producto también será limpio y sólido
      Es parecido a pensar que algo caro debe ser de mayor calidad y mejor en general. En este sitio, el mejor componente es la animación ASCII del hero, pero justamente ese componente no se puede copiar. Gracias a ese genial hero ASCII, la primera impresión fue tan buena que terminé revisando todos los componentes
    • Uso un sitio de Substack para una conferencia que organizo, y antes me molestaban los popups y los botones de suscripción por todas partes, pero en la práctica sí funcionan
      Aunque es un sitio con poco tráfico, los suscriptores pasaron de 0 a casi 1,000, y se convirtió en la mejor forma de llegar a la gente
      https://carolina.codes
    • Creo que el punto aquí no es que los sitios web de startups no deban ser llamativos. Más bien, que no todos tienen que verse iguales
    • Con las miniaturas clickbait pasa lo mismo. A la gente no le gustan, pero tampoco hace clic en miniaturas que no lo son
    • Las guidelines de monetización de YouTube también empujan hacia eso

  • Lo interesante es que las técnicas que aparecen aquí antes se consideraban cosas que solo podían hacer desarrolladores frontend o maquetadores de alto nivel
    Ver que lo que antes era símbolo de habilidad ahora sea objeto de parodia me hace pensar que eso que llamamos alto nivel al final viene de “cosas que los demás no pueden hacer”. Personalmente, nunca se me habría ocurrido cómo implementar una animación de arte ASCII

    • Desde la perspectiva de alguien que se enorgullecía de poder implementar de verdad diseños gráficos complejos, sí he sentido una pequeña crisis de identidad
      Pero al final eso me empuja a buscar lo que la IA todavía encuentra difícil, y creo que eso sigue diferenciando mi trabajo de lo que ahora cualquiera puede generar. Se siente parecido al cambio del realismo al impresionismo después de la aparición de la cámara
    • Antes funcionaba como una especie de prueba de trabajo, pero luego, cuando los circuitos impresos baratos inundaron el mercado, esa cantidad de trabajo pasó a parecer trivial
    • Yo diría que esto tiene más que ver con la creatividad que con “no poder hacerlo”

  • Me gusta que sea gracioso y que al mismo tiempo esté realmente muy bien hecho
    Sinceramente, sí usaría algunos de estos componentes, y en especial el arte ASCII está excelente

    • Yo también iba a decir eso. Definitivamente hay varias cosas aquí que yo mismo he hecho alguna vez
      Se me ocurren decenas más que no están en la lista, pero se siente fresco ver algo tan bien ordenado sobre cosas que todos reconocemos. Aplausos para quien lo hizo

  • La forma más extrema de virtue signaling es dejar todo completamente con los valores por defecto del navegador y no poner ningún estilo
    Como recibir mil millones de dólares en una Serie A y aun así escribir todo en minúsculas porque te da flojera mover el meñique hasta la tecla Shift

    • https://www.berkshirehathaway.com/
    • Al escribir comentarios, casi dejé de preocuparme por usar bien mayúsculas, comas, gramática y ortografía, y la razón principal es dar la señal de que no soy un LLM
    • Quizá counter-signaling sea un término más acertado que “virtue signaling”: https://en.wikipedia.org/wiki/Countersignaling
      “Countersignaling” significa que los actores con mayor cantidad de cierto atributo invierten menos en demostrarlo que quienes tienen una cantidad intermedia de ese mismo atributo
    • ¿No será más bien que simplemente es el original, en vez de virtue signaling?
      https://www.berkshirehathaway.com/
    • Netscape sí que lo sabe

  • Aunque en la práctica es una librería de parodia, todo se ve bastante profesional

    • Sin duda la voy a guardar en marcadores para sacar ideas e inspiración más adelante. No me importa si me da vergüenza admitirlo
    • Entonces supongo que en unos años la apariencia de lo “profesional” se va a ver bastante distinta
    • ¿Qué probabilidad hay de que aparezca una empresa que use esto en un producto real?
    • Burlarse del proceso no significa que ese proceso no sea sofisticado
      Para poder tratar algo como broma, normalmente tienes que entenderlo de forma interconectada
    • Más bien podría estar mostrando lo predecibles y parecidas que son todas esas páginas torpes de startups

  • No entiendo por qué el popover molesto no aparece automáticamente cuando haces scroll por su propia documentación
    Hace falta más IntersectionObserver. Si el nombre de la prop del componente fuera algo como selfArmTrigger, le daría puntos extra

  • “TokenStream – los server-sent events (SSE) se agregaron a la especificación HTML5 en 2008, pero no se usaron hasta 2025.”
    Recuerdo que en 1997 ya existía chunked transfer encoding. Desde entonces ya era fácil transmitir al instante bytes de texto o fragmentos de HTML, justo como hoy la gente lo ve en los LLM
    En 1997 hice con eso un cliente de Telnet basado en web, y más tarde también un MOO/chat de texto para web. Ambos usaban frameset: la línea para escribir iba abajo, y las líneas entrantes las enviaba el servidor cada vez que pasaba algo del lado del servidor, haciendo que el cliente se desplazara cuando llegaba una línea nueva
    Incluso antes había técnicas que se podían abusar para eso, pero eran poco confiables. Aun así, si vamos a hablar de tecnologías que de verdad nadie usó, tengo mucho que decir

    • COMET iba realmente adelantado a su tiempo. Sierra Online lo usó para webchat en 1995, y durante años fue por mucho el mejor webchat

  • Entiendo todos estos clichés en general, y quizá solo ya soy viejo, pero sigue siendo bastante impresionante que Claude pueda sacar este tipo de UI 100 veces más rápido de lo que yo podría
    Tal vez sea porque antes de la IA ni siquiera podía hacer una UI de esta calidad (˶ˆᗜˆ˵)

  • Durante el boom de las ICO de 2017/18, los sitios de marketing para ventas de tokens necesitaban sí o sí un fondo animado de nodos de gráfico
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Agregué el enlace a GitHub para quienes quieran usarlo. Yo también pienso usarlo
    https://github.com/vorpus/performativeUI

    • Espera, mi README todavía no es lo bastante performativo. Voy a tener que agregar una gráfica que muestre el historial de estrellas