Componente que nasceu de fora, não de um projeto nosso. São dois casos, e este arquivo registra os dois: clone de referência — um site no ar e uma seção dele — e origem externa de código, quando existe um autor nomeado e uma licença explícita. Em ambos o código é reescrito do zero; o que muda é o crédito.
| Como entra | reescrito do zero dentro do contrato — nunca cópia de CSS, markup ou JS |
| Por quê | licença de site aleatório não é clara, e o CLAUDE.md §11 é explícito: sem licença clara, se reescreve |
| Status inicial | estavel — normalizado ao contrato, auditado pela conformidade e testado no preview |
A URL fica aqui como referência visual: o que o olho faz na seção, a proporção, o timing, a curva. O que se aproveita é a ideia da interação, não o arquivo.
O que fica de fora por padrão, mesmo que o original tenha: fonte de terceiro, ícone proprietário, logo, foto e qualquer asset com direito de imagem. O preview usa os placeholders de showroom/demo/ e a ficha diz o que o asset real precisa ser.
Clones
| Componente | Referência | Seção | Data | O que mudou na tradução |
|---|---|---|---|---|
hero/duas-colunas-produto |
Corvex | hero — primeira dobra da home | 2026-08-31 | Anek Latin e Instrument Sans saíram (§1) e viraram --display/--sans; #F5F6FC, #8758F0 e #33196F viraram .sec-light, --accent e color-mix; a headline entra por data-split com blur em vez de fade seco; o conteúdo dos cards deixou de ser UI da Corvex e virou contrato de slot em três tipos; a boiada dos cards ganhou fases dessincronizadas; as setas viraram <button> com rótulo, teclado e aria-hidden nos slides fora de vista |
efeitos/cursor-anotacao |
Corvex | hero — as duas bolhas roxas sobre a coluna de texto | 2026-08-31 | ponteiro desenhado do zero; âncoras viraram contrato de dado (data-cur-pos) em vez de posição cravada; quatro cantos em vez de dois; entrada por data-rv do core; relógio desliga fora da tela; texto da bolha legível para leitor de tela |
prova/grade-logos-miolo |
Corvex | dobra de integração — "Sua plataforma favorita já está aqui." | 2026-08-31 | os logos saíram (marcas de terceiros, §11) e o preview usa placeholders monocromáticos; a hachura era SVG hospedado e virou repeating-linear-gradient em --rule; o flex de cinco colunas com células empilhadas à mão virou CSS Grid onde só o miolo declara posição, o que faz as media queries reorganizarem tudo sem JS; olho, título e apoio vêm das primitivas do core; a troca para quando a dobra sai da tela |
conteudo/apresentacao-foto-alternada |
Rony Meisler | dobra "Quem somos?" | 2026-08-31 | a alternância das fotos era um GIF animado e virou três <img> em fusão com blur, o que devolveu alt, lazy, WebP e prefers-reduced-motion — quatro coisas que um GIF não tem como dar; #f1f0eb de fundo e #000 de texto viraram o escopo .sec-paper com --fg/--fg-2; padding de seção 124px virou --sec-gap, colunas 568+80+568 viraram grid de duas frações, título 160/128/-3.2px virou --apres-title com razões (line-height:.82, letter-spacing:-.02em); entrada por data-rv/.ttl do core, que a dobra não tinha |
midia/carrossel-perfis |
Rony Meisler | dobra "Os sócios" | 2026-08-31 | o sage cru rgb(137,147,136) do painel virou --accent com texto em --dark, e o filete rgba(0,0,0,.2) virou --rule; a sangria do trilho foi refeita pela regra da casa (--pfl-inset no grid, sem margem negativa e sem 100vw); a esteira do rodapé era um ticker em JS reescrevendo transform por quadro e virou animação CSS até -50%; os botões anterior/próximo existiam no DOM com 0×0 de tamanho e viraram setas de teclado que funcionam, mais rótulo no trilho, Enter/Espaço para abrir a bio e clones fora da ordem de tabulação; o painel da bio cobria o card inteiro e apagava o nome da pessoa justamente enquanto se lia a bio dela — aqui cobre só a foto |
rodape/cortina-fixa |
Rony Meisler | rodapé — a dobra final da página | 2026-08-31 | o painel preto cravado virou --bg do escopo de tom e o cinza-sage dos filetes virou --rule-2 por --curt-linha; o botão passou a ser a primitiva .btn/.btn-ghost do core, sem retoque de forma; o padding lateral saiu para o .wrap, que segue sendo a única regra da coluna (§4); a faixa central era um canvas Rive — uma lib inteira para um logotipo animado — e virou texto em --display, que escala sozinho e não pede asset; o espaçador ganhou aria-hidden e pointer-events:none, sem o qual ele engoliria os cliques nos links do rodapé; a fila de links virou <nav> com rótulo |
hero/centrado-prova-social |
Kirvano | hero — primeira dobra da home | 2026-09-01 | o fundo era uma imagem (Bg.webp, asset de terceiro) e virou dois linear-gradient inclinados em color-mix sobre --fg, mais o .grain do core; o menta #82d8d0 virou --accent pelo tema novo core/temas/kirvano.css; o botão passou a ser a primitiva .btn/.btn-primary, com um override de escopo duplo (.pitch .pitch-cta) só na escala da tipografia e no canto, pelo mesmo motivo que o .hgal-cap .hgal-type faz; a coreografia foi reproduzida com os tempos medidos (prova social 0,12s · headline 0,30s + 54ms por palavra · apoio 0,90s + 33ms por palavra · botão 1,62s) mas cada passo ganhou blur, que o original não tem e o §5 exige; não usa data-split porque o gancho gera .w, classe do core que componente não pode estilizar — sem estilizar não há como escalonar por palavra; o mockup de dashboard abaixo do botão ficou fora do escopo |
conteudo/trio-cards-ui-simulada |
Kirvano | dobra “Tudo o que você precisa para escalar” | 2026-09-01 | as três superfícies medidas viraram token sem inventar token: #161616 → --dark-2, #d0c9b9 → --accent-2, #262626 → color-mix(in srgb,var(--light) 7%,var(--dark-2)); o card 1 usa a primitiva .glass com os parafusos dela trocados (--glass-bg e --glass-blur:0), porque o fundo medido é linha por linha o desenho da primitiva; o raio 24 sai de calc(var(--radius-media) * 1.5); os nove meios de pagamento viraram rótulos de marca fictícia com nove ícones desenhados na hora em SVG inline — nenhuma marca de terceiro atravessa; as três peças de interface ciclam por um requestAnimationFrame só, com os intervalos medidos (1,9s · 2,5s · 4,26s) lidos do CSS por custom property; ganhou o que o original não tem: aria-pressed nos botões de período, aria-hidden nas cópias da fila e no rotator de comissões, e o clique no seletor desliga o rodízio automático em definitivo |
conteudo/bento-recursos-expansivel |
Kirvano | dobra “Recursos poderosos e gratuitos” | 2026-09-01 | os quatro cards escuros declaram o próprio escopo de tom no markup (.sec-dark e .sec-deep) para inverter o tom dentro de uma dobra clara sem o componente sobrescrever --fg; a camada de hover do original virou expansão por clique num <button> de verdade, com aria-expanded e aria-controls — teclado e toque vêm de graça, e o precedente é o listas/acordeao-faq; o texto sobre a foto ganhou o véu desfocado mascarado que o §6 exige e o original não tem; o raio sai de calc(var(--radius-media) * 1.5); a pílula de status é --accent e não o verde rgb(13,122,59), que não tem token; a altura dos cards é piso, não altura — a folga do pé é para onde o parágrafo cresce |
prova/carrossel-depoimentos |
Kirvano | dobra “Histórias de quem cresce com a Kirvano” | 2026-09-01 | o trilho do original é movido por JavaScript escrevendo transform inline; aqui é animação CSS até -50%, sem uma linha de script, com dois conjuntos idênticos e o segundo em aria-hidden; a máscara de desvanecimento das pontas foi reproduzida com as paradas medidas (transparent → 5% → 95% → transparent) e é a primeira máscara horizontal da biblioteca — as outras dez ocorrências de mask-image no repositório são o véu vertical do §6; a sangria é por --depo-inset, a mesma conta do .wrap aplicada ao trilho, sem margem negativa (§4); com movimento reduzido a esteira congela, o que virou regra editorial na ficha: os três primeiros depoimentos têm de ser os mais fortes |
conteudo/manifesto-com-imagens |
Kirvano | dobra do manifesto tipográfico | 2026-09-01 | a fonte pixelada proprietária não atravessa e o texto passa a ler --display; este é o componente que disparou a promoção de .display-xl ao core — era a terceira cópia da mesma regra (conteudo/apresentacao-foto-alternada e midia/carrossel-perfis eram as outras duas) e o §6 manda promover na terceira; as imagens inline foram convertidas de 72 × 32 para 2em × .89em, presas ao corpo da letra, para escalarem junto com a frase em qualquer tela; a cor de hover por palavra, que na referência gira entre três cores de marca cravadas, vira --frase-cor no style de cada palavra, girando entre --accent, --accent-2 e --fg-muted; o respiro é calc(var(--sec-gap) * .45) porque a faixa é pontuação entre dobras, não uma dobra |
conteudo/lista-beneficios-palco |
ContasOnline | dobra .s-itens — "Chega de planilhas" |
2026-09-06 | as posições em pixel das quatro peças flutuantes viraram porcentagem do palco, que é o que faz a composição sobreviver a qualquer largura de coluna; a linha pontilhada, que no original morre num ponto solto, passou a ligar de fato a confirmação ao cartão, e a curva foi redesenhada para correr pelo alto do quadro em vez de cortar o rosto de quem está na foto; as peças ganharam boiada contínua com fases dessincronizadas, que o original não tem, com data-rv no invólucro e o transform na peça de dentro (a armadilha de especificidade do §5); o disco de ícone escuro virou véu de --accent, porque a dobra aqui é escura; o cartão e a confirmação declaram .sec-light neles mesmos em vez de o componente escrever cor de texto; Jakarta e Inter viraram --display/--sans, os ícones proprietários foram redesenhados em traço simples e a foto virou placeholder; o conteúdo deixou de ser despesa doméstica e virou assessoria, com o número redondo, marcado ilustrativo dentro da própria peça, limitado a estoque e distribuição por classe — nunca resultado; no celular a referência esconde o palco inteiro e aqui a foto fica, só as peças saem |
listas/paineis-empilhados |
ContasOnline | dobra .s-recursos — "Principais recursos" |
2026-09-06 | o que parecia aba clicada era leitura enganosa: são quatro painéis irmãos position:sticky no mesmo top, e o clone reproduz isso em CSS puro — o script só marca e rola; o <button> do índice, que sem script é controle morto, virou <a href="#id"> com scroll-margin-top; o rel="gestao" inventado virou data-pnl-alvo apontando para um id que existe; .ativo virou aria-current="true", lido pelo CSS e pelo leitor de tela; o verde rgb(1,76,60) virou escopo de tom no markup (painéis .sec-deep em seção .sec-dark, precedente do bento-recursos-expansivel); os ícones das abas não atravessaram e viraram numeração 01…04; o <video> proprietário virou placeholder com a especificação do asset real na ficha; o selo do cabeçalho é o efeitos/selo-circular composto, não recopiado; ganhou dois layouts que a referência não tem — trilho horizontal colado no celular e desligamento da pilha em janela abaixo de 700px de altura, onde o painel recortava o botão |
hero/campo-de-conversa |
SkinBoost (design review) | hero — a dobra #inicio, em que a primeira coisa é um campo |
2026-09-21 | veio a ordem de leitura (pergunta, campo, atalhos) e a proporção entre headline e caixa; three.js, GSAP e os ícones Phosphor saíram, e o fundo virou dois gradientes com véu mascarado mais o .grain do core; o envio deixou de depender de JavaScript — <form method="post"> com os chips em type="submit" name="intencao", medido com o script desligado —, e é post e não get porque a primeira frase de quem escreve traz o assunto patrimonial inteiro e não pode virar URL, histórico e log; os chips precisaram de formnovalidate, senão a validação nativa do campo required barrava um atalho que não usa o campo; o anexo de foto do original virou anexo comentado, com as quatro perguntas de LGPD no próprio markup; a ressalva entrou como slot exigido, ligada ao campo por aria-describedby; contraste medido pixel a pixel sobre a arte — 14,5:1 atrás da pergunta, 5,7:1 na ressalva |
efeitos/destaque-texto-scroll |
SkinBoost (design review) | dobra #manifesto — a frase que acende conforme a seção passa |
2026-09-21 | GSAP e ScrollTrigger saíram porque a peça precisa de uma fração e o core já serve LIB.onScroll, que é o rAF único da página; a divisão do trabalho mudou — o script escreve uma custom property na raiz e cada linha resolve a própria opacidade em clamp(), o que custa 0,45 ms por quadro no pior caso (27 palavras) contra 0,022 ms escrevendo opacidade direto, e o número está na ficha; a correção que mais importa é de contraste: o repouso do original, opacity .38, dá 2,57:1 no realce em cor de marca sobre o escuro da casa, contra o mínimo de 3:1 — o padrão daqui é .46, com 4,23:1 e 3,26:1 medidos; entraram @media (scripting: none) e prefers-reduced-motion, que o original não declara; e a peça expôs a armadilha do comentário que se fecha sozinho, hoje no MANUAL §6 |
listas/etapas-em-abas |
SkinBoost (design review) | dobra #como-funciona — as etapas que andam no tempo, não na rolagem |
2026-09-21 | saíram GSAP, ScrollTrigger, os ícones Phosphor e o painel em three.js; entrou o padrão de tablist do W3C APG inteiro (quatro setas, Home/End, roving tabindex, ids por instância, aria-live só na troca automática) e o botão de pausa da WCAG 2.2.2 pela primitiva .btn-play/LIB.pausavel; o filete de progresso é CSS e reinicia sozinho a cada troca; dois defeitos medidos e corrigidos que o original não tem como ter: com o foco observado na seção inteira o focusin do mousedown pausava antes do click e o controle despausava em seguida — o botão fazia o contrário do que dizia, sem erro no console —, e a pista grid-template-rows:0fr não fechava coisa alguma, porque 0fr é minmax(auto,0fr) (medido: 103,9px fechada, a mesma altura da aberta) |
midia/video-escovado-scroll |
SkinBoost (design review) | dobra #manifesto — o filme escovado pela rolagem |
2026-09-21 | o scrub de GSAP/ScrollTrigger virou conta própria dentro do LIB.onScroll, com limiar de 0,025s na escrita do currentTime — cada escrita é um seek, não um ponteiro, e dez micro-rolagens de 2px viraram 2 seeks em vez de 10 — e mira em duration − 0,05s, porque o último quadro pode não existir; o vídeo não atravessa (§11): o <video> sai com pôster de showroom/demo/ e os <source> comentados, e a ficha declara o asset com keyframe em todo quadro, sem o qual escovar trava; o modo estático é o padrão do CSS e não um fallback, o que deixa a dobra íntegra sem JavaScript e sob movimento reduzido sem precisar de @media(scripting:none); não tem botão de pausa, e o porquê está escrito: nada anda sozinho aqui, quem move é quem rola; o percentual é de rolagem e a .nota nega rentabilidade e resultado no mesmo bloco do número |
conteudo/vitrine-destaque |
SkinBoost (design review) | dobra #catalogo — o destaque grande com a fileira que o troca |
2026-09-21 | a troca em GSAP virou fusão de 280ms em CSS e os ícones Phosphor viraram doze SVG de traço desenhados no markup; o número de produto virou número de estrutura do trabalho (90 dias, 3 gerações, 4 comitês por ano), com rótulo obrigatório e ressalva presa a ele por filete — a regra está no slot e em editorial.nota, porque é ali que um site de assessoria escorrega; entraram o padrão de abas APG com teclado completo, o anúncio em aria-live e uma rota sem JavaScript em que os quatro painéis ficam legíveis e a fileira funciona como âncoras (o roving tabindex é do script de propósito: escrito no HTML tiraria três escolhas da ordem de tabulação de quem está sem script); o painel inativo sai por visibility:hidden e não por [hidden], senão a dobra mudava de altura entre abas e a fileira dançava debaixo do cursor; o selo é composição do efeitos/selo-circular, não cópia |
midia/comparador-antes-depois |
SkinBoost (design review) | dobra #evolucao — variação: a fileira que troca o par inteiro |
2026-09-21 | não nasceu componente: o comparador já existia, e o que a referência trouxe foi a fileira de miniaturas que troca o par sem sair da dobra, com o divisor recomeçando; a troca, que lá é GSAP sobre componente de terceiro com retratos reais, virou uma atribuição de src e três textContent; por decisão nossa entraram os <button> com aria-pressed em vez de abas — as setas do teclado já pertencem ao range, e dá-las às miniaturas roubaria o gesto principal —, a volta ao defaultValue em vez de 50 cravado, o pré-carregamento na primeira intenção (pointerenter/focus), que eliminou o pisca branco da primeira troca (0 quadros em branco em 211 vigiados), a fileira que some sem JavaScript e a ressalva .nota como slot exigido, porque antes-e-depois num site de assessoria é onde a demonstração vira promessa de resultado |
listas/leque-paineis |
SkinBoost (design review) | dobra #historias — variação: o leque de retratos com relato e rodízio |
2026-09-21 | também não criou componente: o motor já existia para serviços e o relato entrou como variação declarada (.fan-depo), com as três medidas diferentes saindo de parafuso do próprio componente em vez de CSS duplicado — de brinde, a variação de proporção da abertura, que antes pedia editar o estilo.css, virou uma linha de tema; saíram GSAP, os ícones e as fotos; entrou o que o original não tem — o botão de pausa da WCAG 2.2.2 pela primitiva .btn-play, a pausa automática em aba oculta, dobra fora da tela, ponteiro e foco, toda ela passando por ctl.trocar() para o ícone nunca discordar do relógio, e a distinção entre foco num painel (pausa) e foco no botão (não pausa, senão o botão de retomar travaria a si mesmo); e entrou o compliance, que aqui é decisão de forma: a ressalva de retrato e relato ilustrativos fica colada ao leque, não no rodapé da página |
listas/lista-honorarios |
Aurex Law (template Modulify) | #fees — o preço antes do trabalho |
2026-09-29 | a grade de div virou <table> com os papéis ARIA escritos, porque display em linha de tabela apaga a semântica em alguns leitores; o grid do nome do serviço mora num span dentro do <th> — grid no próprio th desmonta a tabela; no celular as linhas viram blocos sem display:contents; algarismos tabulares; a ressalva do que fica de fora é a .nota do core; a serifada do original virou --display e a voz de testamentaria virou assessoria patrimonial |
conteudo/entregaveis-pastas |
Aurex Law (template Modulify) | #what-you-receive — tudo o que se entrega, numa pasta |
2026-09-29 | as pastas não abrem no hover (CLAUDE.md §6): ficam fechadas, com o tipo do arquivo na aba; o guia vira por um <button> de verdade, com contador e aria-live, e sem JavaScript fica legível na primeira página em vez de quebrado; a página de papel lê --light/--dark para continuar papel em qualquer escopo; os documentos viraram política de investimento, mapa sucessório, relatório e parecer |
prova/mural-depoimentos |
Aurex Law e Funnel (templates Modulify) | #reviews — o que dizem depois |
2026-09-29 | a grade 2×2 virou colunas CSS, para cada card ter a altura da própria frase; <figure>/<blockquote>/<figcaption> e data em <time>; o retrato do cliente virou iniciais — foto de cliente real não atravessa (§11) e placeholder de rosto mente; a autorização de uso vai na .nota; e a regra de conteúdo ficou escrita no slot: atendimento, nunca rentabilidade. Estava travado por tom e foi liberado pelo dono |
conversao/cta-dois-caminhos |
Wearedirect, Greenboard e Transform9 (via cta.gallery) | o fecho em duas portas | 2026-09-29 | peso igual virou largura igual (1fr 1fr, a regra medida no overlay/aviso-cookies); cada bloco é um <a> inteiro; o hover é véu em opacidade e nada se move (§6); o caminho de marca usa a dupla --accent/--dark do .btn-primary |
conversao/cta-pilula-gigante |
Brucira, Muradov e Vandslab (via cta.gallery) | o fecho em pílula da largura da tela | 2026-09-29 | parada: nas referências o texto corre dentro da pílula, e letreiro que anda mais de cinco segundos pede pausa (WCAG 2.2.2) — que dentro de um botão não fecha; o hover é a receita do .btn-primary, sem crescer nem saltar; as alternativas de contato vão em texto embaixo. Estava travado por tom e foi liberado pelo dono |
listas/acordeao-faq |
Ruul (via cta.gallery) | variação: o FAQ com o cartão de suporte ao lado | 2026-09-29 | não criou componente: entrou como .faq-duo, grade de duas colunas no próprio acordeão, com o cartão sticky e os botões do core — nenhum CSS de acordeão duplicado |
conversao/cta-com-assessor |
Poch Studio e Leandra Isler (via cta.gallery) | a chamada final com o rosto de quem atende | 2026-09-29 | o ponto de "online" deixou de ser decorativo: é concedido pelo relógio no fuso do escritório, e sem JavaScript não aparece — é a segunda cópia do motor de horário do conversao/contato-escritorios; a frase é em primeira pessoa com um convite concreto (trinta minutos); dois caminhos, agendar e WhatsApp, com os botões do core |
conversao/selo-prazo |
cta.gallery — Harry Solaris e bakedwith | o selo "2 Spots Remaining!" e a régua de lugares | 2026-09-29 | o que torna a peça aceitável num site financeiro: o selo é concedido a partir de prazo com fuso e de contagem de vagas com data; contagem mais velha que a validade não aparece; prazo vencido ou vagas zeradas tiram o botão do DOM; sem JavaScript, nenhum selo. "Dias restantes" virou o caso principal, por decisão do dono |
listas/programacao-evento |
Metric Berlin 2026 (template Modulify) | #schedule — o que acontece dentro do evento |
2026-09-29 | o dia gruda (sticky) enquanto as sessões passam; <ol> com role="list" e <time> em cada horário; "Acontecendo agora" é concedido pelo relógio só no dia da sessão, pelo motor da listas/agenda-eventos — fora dele a programação é o que foi escrito; as miniaturas por sessão saíram, e a peça é tipográfica |
midia/cartoes-3d |
Revolver (template Modulify) | hero — o cartão corporativo em tambor | 2026-09-29 | sem WebGL e sem biblioteca: os cartões são desenhados em CSS com os tokens, e trocar o tema troca os acabamentos; a roda do mouse não é sequestrada — a rolagem só gira o tambor na variação data-crt-rolagem, com a grade grudada; no dedo o arrasto é horizontal, para não prender a rolagem do celular; entrou o verso ao tocar, pontos e setas como botões, teclado e região viva; cada cartão tem a própria perspective() e o tambor é plano, porque num contexto 3D só os vizinhos se atravessavam no meio do giro; nada segue o cursor — o Cardwall, do mesmo catálogo, ficou de fora por isso |
hero/letreiro-marca |
Skave | hero — o letreiro SKAVE na largura da tela, a capa de vídeo sobre as letras e a hora das cidades | 2026-10-01 | o letreiro eram cinco imagens, uma por letra, e virou texto em --display com corpo por unidade de contêiner (100cqi / --ltr-largura), largura que o script mede uma vez depois que a fonte carrega — medido: borda das letras e borda da coluna em 1261px, com e sem JavaScript; partir em letras desfaz o kerning (+2,7%), e por isso a medida vem depois da partição; a capa virou a do midia/showreel-expansivel, composta, e a escala dela virou a variação .reel-capa--compacta no próprio showreel em vez de CSS alheio aqui; a hora perdeu os segundos e passou a ser concedida pelo LIB.relogio, promovido ao core por causa desta peça (terceira cópia da função); a entrada por máscara virou subida com blur letra a letra, com o nome inteiro em .visually-hidden para o leitor de tela; Next.js, Tailwind e Lenis não atravessaram |
midia/case-ficha-flutuante |
Neto Scariot | os cases da home — vídeo 16:9 com o cartão claro de categoria, frase, cliente e tags pousado nele | 2026-10-01 | o cursor customizado "CLICK TO VIEW PROJECT" (cursor:none no caso inteiro) virou um "Ver o caso" visível e o anel de foco do core; o caso inteiro é clicável por link esticado a partir do título, e a ficha é empilhada por grade e não por position:absolute — absoluta, ela prenderia o ::after do link e a foto deixaria de ser alvo sem nada acusar; o loop de vídeo ganhou pausa (WCAG 2.2.2), toca só na tela e não toca sozinho sob reduce — exercitado com um webm gerado na hora; a frase de resultado de negócio virou o trabalho feito, sem cliente identificado e com a .nota; no celular a ficha continua dentro da mídia, que muda para 4:3 e 3:4; Framer não atravessou |
efeitos/desfoque-progressivo |
Neto Scariot | a faixa de desfoque progressivo presa à borda de baixo da janela | 2026-10-01 | é o "progressive blur" do Framer — oito backdrop-filter de raio dobrando, com janelas de máscara de 12,5%, num contêiner fixed; aqui são cinco camadas (as três mais fracas do original ficam abaixo de 0,4px) e a faixa é sticky, não fixed: gruda enquanto o trecho passa e para no fim dele, e o rodapé entra nítido — medido no preview; a altura virou o --sec-gap, para que, parada no fim, ela cubra só o padding da última dobra; entraram prefers-reduced-transparency e @media print; CSS puro |
conteudo/apresentacao-foto-alternada |
Skave | variação: a dobra "Sobre", com os rótulos "(Abordagem)" e "(Proposta de valor)" grudados | 2026-10-01 | não criou componente: entrou como .apres-colunas, com o vídeo vertical da referência trocado pelo revezamento de fotos que a peça já tinha, em 9:16; o rótulo e o parágrafo grudam juntos (sticky dentro do data-rv, que não interfere) |
prova/marquee-logos |
Dudes Becker | variação: a esteira de retratos redondos com o nome em etiqueta | 2026-10-01 | não criou componente: entrou como .marquee-strip--retratos; o zoom de 5% no hover saiu (§6), a etiqueta virou <figcaption> sempre no DOM, a janela estreita (480px) e as pontas esmaecidas vieram da referência — na largura da tela, seis retratos deixavam metade da faixa vazia; o <figure> precisou de margin:0 |
midia/grade-cases-foto |
Dudes Becker | variação: o "Ver mais (+3)" de cada frente numerada | 2026-10-01 | não criou componente: o primeiro script.js da peça, que só age com [data-gcs-mais]; sem JavaScript todos os cards aparecem; copy do botão no markup com {n}; abrir leva o foco ao primeiro card novo; extras em múltiplo de quatro |
midia/faixa-videos |
Dudes Becker | variação: os cortes de motion em 9:16 | 2026-10-01 | não criou componente: entrou como .fvid--vertical; o 16:9 cravado em três regras virou os parafusos --fvid-pw/--fvid-ph, e o palco do diálogo passou a calcular a largura pela razão — 446×792 a 1440×900; quatro colunas no desktop e duas no celular |
Origem externa de código
Caso distinto do clone: aqui não houve um site no ar e uma seção dele, mas um componente publicado como código, com autor nomeado e licença explícita. É o que o CLAUDE.md §11 chama de componente de origem externa, e a regra dele é a que muda tudo: licença clara é condição de entrada, e o crédito — autor, obra e licença — é obrigatório na ficha, mesmo quando a licença dispensa.
O código continua sendo reescrito do zero. Licença permissiva autoriza copiar; o contrato desta biblioteca é que impede — um arquivo em React, Tailwind e framer-motion não caberia aqui de nenhum jeito. Da origem vem a ideia da interação; o crédito é por ela.
| Componente | Origem | Autor | Licença | Data | O que mudou na tradução |
|---|---|---|---|---|---|
midia/galeria-pasta |
interactive-folder-gallery.tsx, no registro do 21st.dev |
alexperezcedeno | MIT | 2026-08 | reimplementado do zero — o original é incompatível com o contrato em cinco pontos de uma vez (React, TypeScript, Tailwind, shadcn e framer-motion); o spring do framer-motion virou transition na curva --ease, e o retorno perdeu a oscilação, que spring de verdade tem e esta não finge ter; as posições do leque eram calculadas em JS por índice e viraram --i/--a no markup com a fórmula no CSS, o que faz o leque de hover funcionar sem uma linha de JavaScript; o <div> clicável virou <button> com aria-expanded; fechava só por arraste e agora fecha também por Esc, seta para baixo, botão e clique fora — arraste sozinho exclui quem usa teclado; as cinco fotos vinham do Unsplash por URL e viraram placeholders locais, que a CSP do site bloquearia de todo jeito; #1e1e1e e #2a2a2a viraram --dark, --dark-2, --rule e --rule-2 |