Sabe esse fundo do site da Netflix?

E se eu te dissesse que tem uma plataforma que te entrega um layout melhor, mais dinâmico e animado — de graça. 171 componentes. Eu fico no gratuito.

Sabe esse fundo do site da Netflix?

E se eu te dissesse que tem uma plataforma que te entrega um layout melhor, mais dinâmico e animado — completamente de graça?

Não é a Netflix usando essa biblioteca. É o mesmo tipo de parede: capa atrás de capa, em perspectiva, se mexendo. Só que aqui o efeito é aberto. Você cola as suas fotos. Não as deles.

O nome do efeito é Drift Wall. Ficha: reactbits.dev/components/drift-wall. Parede sem fim, os azulejos passam, no hover um levanta. Cada peça aceita imagem, título e link.

O site é o React Bits

Além desse efeito, dentro dessa biblioteca você encontra 171 componentes animados gratuitos pra copiar e jogar na sua IA na hora de construir sistema ou página.

O reactbits.dev é isso. A home ainda escreve 165+ e free forever. O campo de busca da documentação, hoje, 7 de setembro: Filter 171 components. No GitHub, o selo do site marca 46,9 mil estrelas.

Tem a versão Pro, paga, com bloco, tela, template e skill de agente. No card deles: 134 componentes, 238 blocos, 300 telas de App UI, 11 templates, 20 skills. Até hoje eu só aproveitei o gratuito. E com certeza é uma das melhores que eu tenho salva.

Pode usar à vontade no seu site.

O prompt do Drift Wall. Cola. Anexa as fotos.

Não cola e fala "faz igual a Netflix". A IA baixa capa de filme e você leva problema. O caminho é o contrário: as imagens são as que você manda.

• Abrir a ficha do Drift Wall e olhar o efeito ao vivo
• Separar as fotos que entram na parede (produto, captura, capa do seu conteúdo — o que é seu)
• Colar o prompt abaixo na IA e anexar essas fotos na mesma conversa
• Mandar ela ler a documentação e instalar. Não redesenha. Não inventa outro efeito
• Pedir pra otimizar o peso. Fundo atrás do texto, não na frente

React Bits. Componente: Drift Wall.
Ficha: https://reactbits.dev/components/drift-wall?tileHeight=134&gap=6&tileWidth=192&speed=30&turn=-12

Abre essa ficha. Lê a documentação. Instala no meu projeto.
Não redesenha. Não troca por outro efeito. Não usa as imagens de exemplo do site.

As fotos da parede são SÓ as que eu anexei nesta conversa. Cada item do Drift Wall é { image, title?, href? }.
Monta o array items com essas imagens. Se eu não mandei título ou link, deixa sem.
Não baixa poster de streaming. Não vai na Netflix buscar capa.

Usa estes números, não o padrão da ficha:
tileWidth: 192
tileHeight: 134
gap: 6
speed: 30
turn: -12
O resto, se a ficha não pedir pra mudar, deixa o padrão.

Isso é o FUNDO da primeira dobra. Headline e o que a pessoa tem que ler ficam NA FRENTE, com contraste. Escurece o bastante pra ler.
Carrega o efeito só quando a seção entrar na tela.
Quem pediu menos movimento vê o fundo parado.
Otimiza pro menor peso possível.
Se faltar dependência, lê a doc e instala. Se faltar cor, pergunta antes de inventar.
Depois me mostra onde cada arquivo foi parar.

A linha das fotos anexadas é o que impede a página de nascer com cara de cópia. A linha do peso é o que impede o celular de chorar.

Tem foto, grid, texto, fundo. Com efeito e sem.

Dá pra fazer um layout nessa pegada da Netflix e muito mais. Não é só fundo. Tem elemento pra foto, pra grid, pra texto. Com animação e sem.

Alguns que eu abri hoje, do lado do Drift Wall:

• [Option Wheel](https://reactbits.dev/components/option-wheel) — roda de opções. Scroll, arrasta ou seta. O do meio acende, o resto some. Serve pra escolher plano, categoria, episódio.
• [Masked Heading](https://reactbits.dev/text-animations/masked-heading?text=Shot+on+location) — o título vira máscara. A foto ou o vídeo passa por dentro da letra. Headline curta. Parágrafo, ninguém lê.
• [Split Flap Text](https://reactbits.dev/text-animations/split-flap-text?words=BOARDING+NOW,FINAL+CALL,GATE+OPEN) — painel de aeroporto. As letras viram até chegar na frase. BOARDING NOW. FINAL CALL. GATE OPEN.
• [Particle Text](https://reactbits.dev/text-animations/particle-text?text=Nomics+Tech+&highlightColor=84CC16) — a letra nasce de partícula. Eu testei com Nomics Tech e o verde #84CC16.
• [Glow Cursor](https://reactbits.dev/animations/glow-cursor) — rastro de luz no mouse. Desktop. Celular não tem mouse.
• [Background Studio](https://reactbits.dev/tools/background-studio?bg=antigravity) — você monta o fundo nos controles e exporta o código. O preset Antigravity é um campo de partícula que foge do cursor.

Em cada ficha tem Copy for AI. É o briefing daquela peça, pronto pra colar. Você não fica copiando JSON na mão. Manda a IA ler a documentação e instalar.

Onde pisar

• Não é clone da Netflix. É o tipo de parede. A marca, o vermelho, o catálogo de filme — isso não se copia.
• As fotos são as suas. Poster de streaming na parede é problema seu, não da biblioteca.
• Efeito pesa. Vários usam placa de vídeo. Testa no celular mais simples do seu público. E pede pra IA otimizar o peso.
• Um efeito grande por dobra. Drift Wall atrás, headline na frente. Não empilha rastro de mouse, partícula e painel de aeroporto na mesma tela.
• Não substitui tabela, formulário, seletor de data. É vitrine: landing, portfólio, primeira dobra.

Resumindo

Parede de capas, de graça, com as suas fotos. Mais 171 peças pra texto, grid, fundo e cursor. Pro existe. Eu fico no gratuito.

Comenta BITS que eu te mando o link, o passo a passo e o prompt pra colar com as imagens. Bora testar.