# Fliperama Transforma uma foto em padrão de pontinhos de poucas cores, com cara de jogo antigo ou de impressão retrô. > Fliperama é um componente do THM Componentes que redesenha uma imagem com pontilhado, a técnica de simular tons com poucos pontos de cor usada em jogos antigos e impressões. Há padrões Bayer, retícula, ruído e hachura, e cores originais, preto e branco, duotone ou paleta própria. Funciona em campanhas retrô e capas editoriais. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/fliperama/ ## 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 ```text 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. ## Componentes relacionados - [Lambe-lambe](https://vibecode.thmtecnologia.com/componentes/lambe-lambe/): A foto vira pontinhos de impressão, como jornal ou gibi, e uma lupa mostra a imagem original. - [Ponto-cruz](https://vibecode.thmtecnologia.com/componentes/ponto-cruz/): O conteúdo real da página é redesenhado ao vivo como arte ASCII, com caracteres que imitam luz e sombra. - [Chuvisco](https://vibecode.thmtecnologia.com/componentes/chuvisco/): A imagem treme, se parte em faixas e separa as cores como um sinal de TV com defeito. - [Caligrama](https://vibecode.thmtecnologia.com/componentes/caligrama/): Uma forma 3D girando na tela, desenhada ao vivo com letras e símbolos de terminal em vez de pixels. - [Ampulheta](https://vibecode.thmtecnologia.com/componentes/ampulheta/): Seu logo ou retrato se monta com pontinhos que voam até o lugar, fogem do mouse e depois voltam. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.