573 heros de site pra mostrar pra tua IA

O Supahero é uma galeria só de seções hero, a primeira dobra de sites reais, com página própria pra cada uma e link pro site original. É aberto e sem conta. O jeito de usar com IA é juntar duas ou três e dizer o que pegar de cada uma.

A primeira dobra é o pedaço da página que decide se a pessoa fica. E é justamente onde a IA mais se repete quando você pede sem referência: título centralizado, dois botões, um print do produto embaixo.

O Supahero é uma galeria só de seções hero, a primeira tela de sites reais, com 573 heros hoje. É aberto e sem conta.

O que tem lá

• 573 prints de heros de sites de verdade, de marca grande (Linear, Stripe, Notion, Figma, Raycast, Airbnb) a estúdio pequeno e portfólio.
• Uma página por hero, com o print grande, a descrição do site, a data em que entrou na galeria e o botão Visitar site.
• Busca no topo, que filtra enquanto você digita.
• Duas abas extras, Ferramentas e Templates (de Framer), que são listas de links pra fora.

Abrindo um hero

O print é estático. O que faz a galeria valer a pena é o botão Visitar site: ele leva pro site original, onde você vê o hero rodando de verdade, com a animação, o vídeo de fundo e o jeito que o menu aparece. É ali que você decide o que quer levar.

A busca

A busca abre por cima da galeria e vai filtrando enquanto você digita. Não tem filtro por categoria, por cor ou por tipo de site, então o caminho é buscar pelo nome ou rolar com calma.

Um detalhe antes de ir

O Supahero agora faz parte do screensdesign, uma biblioteca de telas de app, e a entrada mais recente da galeria é de 8 de dezembro de 2025. Então trate como acervo. Hero bom não vence em dez meses, só não espere a tendência deste mês ali. A única coisa paga no site é o espaço pra quem quer anunciar.

O que eu faria

Antes de escolher, eu olharia quatro coisas em cada hero, porque são elas que a IA mais erra quando pede sem referência:

• O tamanho do título em relação à tela, e em quantas linhas ele quebra.
• Onde fica o botão principal, e se tem um segundo botão ou não.
• O que ocupa o fundo: foto, vídeo, 3D, gradiente ou cor lisa.
• Quanto do próximo bloco aparece antes de a pessoa rolar.

Escolheria duas ou três referências com o clima da marca, abriria o site original de cada uma e tiraria print só da primeira dobra, no tamanho de tela que o projeto vai usar.

Aí mandaria os prints pra IA junto com o texto do hero (título, subtítulo e botão), dizendo o que eu quero de cada referência: a tipografia de uma, o layout de outra, o fundo da terceira. Com uma referência só, a IA tende a copiar. Com três, e dizendo o que pegar de cada uma, ela mistura e o resultado fica com a cara do projeto.

E pediria pra ela descrever o hero em texto antes de escrever o código: tamanho do título, alinhamento, espaçamento, o que se mexe e quando. Se a descrição estiver errada, você corrige ali, antes de ter uma página inteira pra desfazer.

A galeria está aqui: supahero.io.