Show HN: Performative-UI – biblioteca de componentes React baseada em tropos de design

 (vorpus.github.io)
1 pontos por GN⁺ 4 시간 전 | 1 comentários | Compartilhar no WhatsApp
  • Coleção de componentes React AI-native para startups de IA, com 27 componentes e licença MIT
  • Está publicamente disponível, e o comando de instalação é npm install performative-ui
  • A composição é categorizada em Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof e Pricing & Conversion
  • Componentes como Prompt, TokenStream, LogoMarquee, PricingCard e WaitlistForm cuidam de campo de entrada de prompt, fluxo de tokens, logos, cartão de preços e formulário de lista de espera
  • A descrição de cada componente expressa em frases curtas os sinais de design usados em landing pages de startups de IA, como captação, nome de modelo, logo, números e UI de conversão

Visão geral

  • Performative-UI é uma coleção publicamente disponível de componentes React AI-native para startups de IA, com 27 componentes e licença MIT
  • O comando de instalação é npm install performative-ui
  • O objetivo dos componentes é sinalizar o quanto a rodada de investimento foi sobresubscrita

Lista de componentes

  • Atoms

    • Sparkle: elemento que adiciona ✦ a qualquer substantivo para lançar duas vezes mais rápido
    • GradientText: texto em gradiente para quando itálico sozinho não parece bilionário o suficiente
    • StatusDot: ponto de status sempre verde, mesmo quando não deveria

  • Primitives

    • Button: botão feito para se mover e fazer você clicar
    • EyebrowPill: o lugar onde entra o nome do modelo quando não há mais nada a dizer
    • Prompt: textarea que todo builder de IA publica em vez de explicar a função do produto
    Publicidade

  • Banners

    • StickyBanner: notícia de captação disfarçada de utilitário

  • Heroes

    • Rotator: texto rotativo para quando dizer “everything” não parece ambicioso o bastante
    • WordRoll: exibição do alcance exagerado do Rotator sem precisar esperar o visitante digitar
    • PromptHero: hero que substitui a proposta de valor por uma entrada de texto
    • AsciiHero: hero ASCII para hackers, feito por quem segue as newsletters certas

  • Backgrounds

    • Aurora: fundo que define uma geração com três blobs
    • NodeGraphBackground: fundo de grafo de nós que, conceitualmente, é uma rede neural
    • FloatingSparkles: brilhos flutuantes que dizem “a mágica não se lança sozinha”

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: o código real está chegando; isto é só o trailer
    Publicidade

  • Conversation

    • ChatBubble: bolha de chat em que, se está dentro do balão, então deve ser verdade
    • TokenStream: fluxo de tokens lembrando que Server-sent events (SSE) foram adicionados à especificação HTML5 em 2008, mas só foram usados até 2025
    • ChatFAB: FAB de chat que significa que agora não há escapatória

  • Social Proof

    • LogoMarquee: marquee de logos confiado por tudo que você já ouviu falar, incluindo quem não assinou nada
    • LogoRow: logos estáticos para quando só há seis logos
    • StatCounter: contador baseado na ideia de que números subindo são melhores do que números que não sobem
    • CommunityBadge: badge de comunidade em que Stars são o novo MAU

  • Pricing & Conversion

    • PricingCard: cartão de preços em que a carta do meio brilha, então escolha de acordo
    • BeforeAfter: à esquerda é caos, à direita somos nós
    • WaitlistForm: formulário de lista de espera para conter a demanda que você mesmo criou
    • Popover: popover feito para conversão, não para consentimento

Leituras relacionadas

1 comentários

 
GN⁺ 4 시간 전
Comentários no Hacker News

  • Já me disseram diretamente, em vários projetos, que quando eu mostrava um site simples e direto ao ponto, ele não era levado a sério por faltar esse tipo de elemento performático de UI
    É parecido com reclamar que YouTubers ficam pedindo inscrição o tempo todo. Eles fazem isso porque, estatisticamente, funciona

    • No fim, é uma questão de primeira impressão. O design de um site é a primeira impressão da empresa, e quando o design é caprichado, as pessoas passam a acreditar que o produto também será caprichado e robusto
      É parecido com achar que algo mais caro tem mais qualidade e é melhor no geral. Neste site, o melhor componente é a animação ASCII da área hero, mas justamente esse componente não pode ser copiado. Foi esse hero ASCII incrível que me deu uma boa primeira impressão e me fez percorrer todos os componentes
    • Eu uso um site do Substack para a conferência que organizo, e antes os pop-ups e botões de inscrição espalhados por todo lado me incomodavam, mas na prática funcionam
      Mesmo sendo um site com pouco tráfego, o número de inscritos foi de 0 para quase 1.000, e isso acabou virando a melhor forma de alcançar as pessoas
      https://carolina.codes
    • Acho que o ponto aqui não é que sites de startup não devam ser chamativos. Parece mais que a ideia é que nem todo mundo precisa ter a mesma cara
    • Miniaturas clickbait são a mesma coisa. As pessoas dizem que odeiam, mas no fim quase não clicam nas que não são clickbait
    • As diretrizes de monetização do YouTube também exigem isso

  • O interessante é que as técnicas mostradas aqui já foram vistas como coisas que só desenvolvedores front-end ou publicadores de alto nível conseguiam fazer
    Ver algo que antes era símbolo de habilidade virar alvo de sátira me faz pensar que o tal alto nível de que falamos acaba vindo de “fazer o que os outros não conseguem”. Pessoalmente, eu nunca nem tinha pensado em como implementar animação com arte ASCII

    • Do ponto de vista de alguém que sentia orgulho por conseguir implementar de verdade um design gráfico complexo, admito que isso causou uma certa crise de identidade
      Mas, no fim, isso me empurra a procurar o que a IA ainda acha difícil, e isso continua diferenciando meu trabalho daquilo que agora qualquer um pode gerar. Parece parecido com a passagem do realismo para o impressionismo depois da chegada da câmera
    • É parecido com algo que antes funcionava como uma prova de trabalho, mas depois perdeu importância quando placas de circuito impressas baratas inundaram o mercado
    • Eu diria que isso está mais ligado à criatividade do que a “não conseguir fazer”

  • Gosto do fato de isso ser engraçado e, ao mesmo tempo, muito bem feito
    Sinceramente, eu usaria alguns desses componentes de verdade, especialmente a arte ASCII, que está excelente

    • Eu ia dizer exatamente a mesma coisa. Alguns dos itens daqui eu com certeza já fiz também
      Também consigo pensar em dezenas que não estão na lista, mas é refrescante ver algo que todo mundo reconhece tão bem organizado assim. Palmas para quem fez

  • A forma mais extrema de ostentação de virtude é deixar tudo completamente nos padrões do navegador, sem estilização nenhuma
    Como receber US$ 1 bilhão numa Série A e ainda escrever tudo em minúsculas porque dá preguiça de levar o dedo mindinho até a tecla Shift

    • https://www.berkshirehathaway.com/
    • Eu praticamente parei de me preocupar com uso correto de maiúsculas e minúsculas, vírgulas, gramática e ortografia ao escrever comentários, principalmente para sinalizar que não sou um LLM
    • Talvez counter-signaling faça mais sentido do que “ostentação de virtude”: https://en.wikipedia.org/wiki/Countersignaling
      “Counter-signaling” significa quando agentes que possuem mais de um atributo investem menos em provar esse atributo do que indivíduos que o possuem em grau intermediário
    • Em vez de ostentação de virtude, não seria simplesmente o original?
      https://www.berkshirehathaway.com/
    • A Netscape sabia disso melhor do que ninguém

  • Mesmo sendo praticamente uma biblioteca de paródia, tudo parece bem profissional

    • Com certeza vou salvar nos favoritos para pegar ideias e inspiração depois. Não tenho vergonha de admitir
    • Nesse caso, parece que daqui a alguns anos a aparência de “profissional” vai ser bem diferente
    • Qual será a chance de aparecer alguma empresa usando isso num produto real?
    • Zombar de um processo não significa que esse processo não seja sofisticado
      Para tratar algo como piada, em geral é preciso entendê-lo de forma interligada
    • Talvez isso mostre o quanto todas essas páginas meia-boca de startup são previsíveis e parecidas

  • Não entendo por que o popover irritante não aparece automaticamente quando você rola a própria documentação
    Falta mais IntersectionObserver nisso aí. E eu ainda daria pontos extras se o nome da propriedade do componente fosse algo como selfArmTrigger

  • “TokenStream – eventos enviados pelo servidor (SSE) foram adicionados à especificação do HTML5 em 2008, mas só foram usados em 2025.”
    Eu me lembro de chunked transfer encoding em 1997. Já naquela época era fácil transmitir imediatamente bytes de texto ou pedaços de HTML, exatamente como as pessoas veem hoje com LLMs
    Em 1997 eu fiz um cliente web de Telnet com isso, e depois também fiz um MOO/chat em texto para web. Ambos usavam frameset, com a linha de envio na parte de baixo da tela, enquanto as linhas recebidas eram enviadas pelo servidor sempre que algo acontecia do lado dele, fazendo o cliente rolar quando novas linhas chegavam
    Já existiam antes técnicas que davam para abusar, mas eram pouco confiáveis. Ainda assim, se a ideia é falar de tecnologias que realmente ninguém usou, eu teria muito a dizer

    • COMET estava muito à frente do seu tempo. A Sierra Online usou isso em chat web em 1995, e por anos foi de longe o melhor chat web que existia

  • Entendo todos esses clichês no geral, e talvez eu esteja apenas ficando velho, mas ainda acho bem impressionante que o Claude consiga gerar esse tipo de UI 100 vezes mais rápido do que eu
    Talvez seja porque, antes da IA, eu nem conseguia fazer uma UI desse nível de qualidade (˶ˆᗜˆ˵)

  • No boom das ICOs em 2017/18, fundos com nós de gráfico animados no fundo eram item obrigatório em sites de marketing para venda de tokens
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • Adicionei o link do GitHub para quem quiser usar. Eu também pretendo usar
    https://github.com/vorpus/performativeUI

    • Espera, meu README ainda não está performático o suficiente. Preciso adicionar um gráfico mostrando o histórico da contagem de estrelas