Como ele é
Parece uma foto vista numa tela de videogame dos anos 80 ou impressa num jornal barato. A imagem é recortada em blocos de poucos pixels, e cada bloco vira uma cor de uma paleta curta, com um padrão regular de pontos que cria a ilusão de meio-tom. No modo Bayer surge uma trama em xadrez fino; na retícula, pontos em diagonal; na hachura, linhas cruzadas. Em preto e branco o resultado lembra uma gravura; em duotone, um cartaz de duas cores. Por padrão o desenho fica parado; com a animação ligada, o modo de ruído chuvisca como TV fora do ar.
Você pode estar procurando isto se pediu algo assim
- foto com efeito pixelado de videogame antigo
- imagem em pontinhos tipo jornal impresso
- efeito retrô de poucos tons em cima da foto do produto
- deixar a imagem do hero com cara de pixel art
- foto em preto e branco granulada, estilo gravura
- transformar a imagem nas duas cores da marca com textura de pontos
- efeito de tela de computador antigo numa campanha
Também chamado de
- dithering
- pontilhado ordenado
- ordered dithering
- Bayer dithering
- efeito pixel art
- efeito halftone
- retícula
- 1-bit effect
Quando usar
- Campanhas com estética retrô, de games ou de tecnologia antiga
- Capas de seção editoriais com uma foto forte
- Fotos de produto em duotone com as cores da marca
- Portfólios e sites de música, moda ou arte com linguagem gráfica
Quando evitar
- Fotos em que detalhes finos importam, como retratos de equipe ou produtos com textura
- Galerias com muitas imagens, porque cada uma é processada pixel a pixel no processador
- Imagens de outros domínios sem permissão de CORS, que o canvas não consegue ler
Como pedir para a sua IA
Aplique um efeito de dithering ordenado em canvas na foto do hero da campanha, em duotone com as cores da marca, carregado só no navegador, com imagem estática de reserva e sem animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Fliperama
Posso usar qualquer imagem em Fliperama?
Use imagens do seu próprio domínio ou de servidores que liberam CORS. Fliperama precisa ler os pixels da imagem num canvas, e o navegador bloqueia essa leitura em imagens de outros sites sem essa permissão; nesse caso o efeito não aparece e um erro surge no console.
Fliperama pesa no celular?
Sem animação, Fliperama processa a imagem uma vez e só refaz o desenho quando o tamanho ou as opções mudam. Com a animação ligada, o componente refaz todos os blocos a cada quadro no processador, o que pesa em aparelhos fracos. O prompt do THM Componentes pede pausa fora da tela e carregamento sob demanda.
Fliperama é acessível para leitores de tela?
O canvas de Fliperama se apresenta como imagem, mas com um rótulo genérico em inglês. Vale pedir à IA que troque esse rótulo pela descrição real da foto, como faria no texto alternativo. Por padrão não há animação, e o prompt do THM Componentes pede versão estática para movimento reduzido.
