O que você recebe
- Um arquivo HTML com fontes e imagens embutidas, sem requisições de rede
- Hero em shader, faixa de clientes, faixa do estúdio, grade de trabalhos em escalonamento e um índice pesquisável
- Uma página por case, além de blog, privacidade, termos e uma tela de não encontrado
- Abas de serviços, planos com troca de moeda, orçamentos, equipe, FAQ e um formulário de briefing
- Fotos de estúdio, de cases e da equipe e um loop de card de case gerados com o PopNow após cotação, opcionais
Ideal para
- Estúdios de design, marca, web, motion e 3D
- Freelancers e pequenas consultorias com projetos reais para mostrar
- Escritórios de arquitetura e interiores que querem um portfólio calmo e premium
Não é para
- Lojas online ou marcas escuras e cheias de neon
- Páginas que precisam de foto ou vídeo atrás do título
- Sites sem trabalhos finalizados para apresentar
Como usar
No Claude ou no ChatGPT
Use a skill da PopNow “Site de agência com hero em shader” (creative-agency-website) para isto: Monte o site da Quarrow, um estúdio de marca e web com quatro pessoas no Porto. Projetos: relançamento de uma loja de cerâmica, um app de horários de balsa e a identidade de uma padaria. Contratações: Sprint, Launch, Retainer.
Em um agente de programação
/popnow-creative-agency-website Monte o site da Quarrow, um estúdio de marca e web com quatro pessoas no Porto. Projetos: relançamento de uma loja de cerâmica, um app de horários de balsa e a identidade de uma padaria. Contratações: Sprint, Launch, Retainer.
Depois tente
Informe o custo das fotos dos três cases e de uma grade de equipe antes de gerar qualquer coisa.
Transforme o card do caso da balsa em um loop de vídeo lento a partir da foto principal e me diga o preço antes.
O que ter em mãos
- Nome do estúdio, uma frase de posicionamento, cidades e contatos
- De dois a seis projetos com o briefing, o que foi feito e um resultado mensurável
- Serviços, como os clientes contratam e quem lidera
- Opcional: uma chave de API do PopNow ou fotos próprias do estúdio e dos projetos
Skills parecidas
Ver todas →Criador de avatar 3D
+3Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
Calendário heatmap
+3Um ano de atividade diária em uma grade de calendário sombreada, com sequências, totais e navegação por teclado.
Landing page de SaaS com IA
+3Papel areia, trilhos finos e um quadro kanban ao vivo em que um assistente planeja tarefas.
Seção hero animada
+3Um hero de landing page com uma palavra do título que gira suavemente, dois botões e um quadro largo de imagem.
Landing page SaaS escura
+3Um site de marketing escuro e cheio de movimento para um produto de software, entregue em um único arquivo HTML.
Site de portfólio de designer
+3Seis cartões inclinados em volta de um título sobre cinza calmo, um retrato em vermelho e cases editoriais.
Site de portfólio para desenvolvedor
+3Um site pessoal escuro para engenheiros, com cases, artigos, palestras, currículo e formulário de contato.
Site editorial de SaaS
+3Hero dividido em azul-marinho, título serifado ao lado de uma foto documental e um destaque azul-cobalto.
Modelo de site glassmorphism
+3Pílulas de vidro fosco sobre película quase preta, título serifado enorme e captura de e-mail.
Site de produto de hardware
+3Nomes de modelo enormes e finos sobre fotos prateadas, cartões de especificação e linha em escala.
Diagrama de arquitetura interativo
+3Um diagrama de sistema offline e clicável, feito a partir de um modelo JSON verificado, com a evidência por trás de cada caixa.
Hero interativo com grade
+3Uma grade escura de fios finos que se curva em direção ao cursor e lança um anel luminoso a cada clique.
Explorador de grafo de conhecimento
+3Transforme anotações de projeto em um grafo offline e pesquisável, em que cada afirmação leva à linha de origem.
Modelo de dashboard de KPIs
+3Quatro cartões de KPI com variação, um gráfico de linha, detalhamento e barras de meta em papel quente.
Landing page a partir de mockups com IA
+3Veja três páginas completas antes, escolha uma, e o seu agente a constrói como código limpo e responsivo.
Template de site de revista
+3Um site de revista com qualidade de impresso, com artigos, temas, uma pequena loja e assinaturas, em um arquivo HTML.
Hero com animação de partículas
+3Texto em papel quente ao lado de uma esfera girando de pontos em tinta e azul-petróleo, que muda a cada ideia.
Site de marca pessoal
+3Um retrato esfumado sobre papel quente, sob um colchete fino, com afirmações claras e fortes de cada lado.
Página de lançamento de produto cinematográfica
+3Página quase preta com luz de cinema: título em serifa, cena noturna em letterbox e formulário de reserva.
Template de painel administrativo
+3Um painel de back-office funcional com gráficos, tabelas, kanban e calendário, em um único arquivo HTML offline.
Template de landing page SaaS
+3Um site de marketing claro e tranquilo para um produto de software, com console de produto funcional, preços e cadastro.
Site de portfólio estilo scrapbook
+3Um currículo online de várias páginas feito de objetos de papel, com cases e um currículo para imprimir.
Template de site de loja de tênis
+3Uma loja completa de calçados ou roupas, com catálogo, páginas de produto, sacola e checkout de demonstração em um arquivo HTML.
Landing page de automação de fluxos
+3Página grafite com título pequeno e um grafo de nós ao vivo que roda, tenta de novo e mostra logs.
Perguntas
O shader deixa a página mais lenta?
Ele renderiza em resolução reduzida com a proporção de pixels limitada, pausa quando o hero sai da tela ou a aba fica oculta, e mostra um único quadro fixo quando há movimento reduzido. Por baixo há uma versão em CSS do mesmo visual, então a página fica pronta mesmo sem WebGL.
O que o PopNow gera aqui?
Fotos para a faixa do estúdio, para cada case e para a equipe, todas em uma só direção de arte, além de um loop lento opcional que substitui a imagem fixa de um card de case. O hero em si é código e não precisa de nada. Cada execução é cotada em créditos e só começa depois da sua confirmação.
Posso usar sem uma chave de API do PopNow?
Pode. As fotos de estúdio incluídas podem ficar como substitutos neutros, as mídias dos cases viram painéis em CSS nas cores de cada cliente, e os orçamentos usam avatares de iniciais. A skill lista os espaços que ainda pedem fotos reais.
Posso trocar o laranja de destaque?
Pode, por meio de alguns tokens e das predefinições de cor do shader. A página mantém um único destaque e evita tons roxos e violetas, o que o validador confere; um DESIGN.md da marca no projeto é mapeado para esses tokens.