Gabriel Rocha Studio · Biblioteca de seções

Site autoral do estúdio. Arquivo único e autocontido (gabriel-rocha-studio-2.html, 1256 linhas: CSS nas linhas 10–451, JS nas 908–1254), fora do repositório da biblioteca.


Origem	`GR DESIGN/2026/Claude/sitegr/gabriel-rocha-studio-2.html`
Varrido em	2026-08-31
Extraídos	3 de 17 candidatos
Dependência no original	GSAP 3.12.5 + ScrollTrigger, por CDN

Nada aqui exigia GSAP. Só dois efeitos usavam scrub de verdade (parallax do mural do hero e rotação do shape) e três eram timeline encadeada; o resto era reveal e contador, que o core/motion.js já resolve. Os três componentes extraídos saíram inteiros em vanilla.

Extraídos

Componente	Onde no original	O quê
`prova/stats-contador-regua`	CSS 154–163, markup 559–575, JS 1043–1061	Régua de números que contam ao entrar na tela. `gsap.to` virou `IntersectionObserver` + `rAF` com `easeOutCubic`. As casas decimais passaram a sair do próprio `data-count` — o original arredondava e quebrava em `98.5`.
`midia/galeria-scroll-horizontal`	CSS 218–263, markup 649–689	Faixa de cases com `scroll-snap` horizontal. Ganhou o que faltava: navegação por teclado, botões rotulados e legenda dentro da foto (§6).
`overlay/card-expansivel-fullscreen`	CSS 355–426, markup 691–815, JS 1137–1206	Card que se expande a tela cheia por FLIP. Primeiro componente da categoria `overlay`. O original animava `top/left/width/height`; aqui é `transform`, que compõe na GPU.

Os três entraram como experimental: o site rodou, mas uma vez só.

Fila

Catorze candidatos mapeados e não extraídos. Em ordem de prioridade:

Candidato	Categoria	Nota
`mural-marquee-parallax`	hero	três faixas bidirecionais com parallax e blur por scroll; a assinatura visual da página
`faixa-invertida-scroll`	efeitos	a seção inverte para papel e apaga os trilhos da página inteira. Tensiona o §3 (regra do tom vizinho) de propósito — a ficha terá de declarar a exceção
`cursor-ponto-anel`	efeitos	ponto colado no ponteiro + anel com lerp; já é vanilla no original
`botao-magnetico`	efeitos	o custo real é a easing `elastic.out`, ~15 linhas à mão
`tilt-3d-card`	efeitos	comportamento anexável a qualquer card
`acordeao-servicos-midia`	listas	mesmo mecanismo do `acordeao-faq`; deve reusar o JS de lá, não escrever outro
`trilhos-de-grade`	efeitos	duas réguas de 1px marcando a coluna
`barra-progresso-leitura`	navegacao	a categoria cita "progresso de leitura" e nenhum componente entrega
`spotlight-cursor`	efeitos	halo radial seguindo o mouse
`shape-3d-scroll`	efeitos	gira 360° em Y — mostra o espelho da imagem em metade do percurso
`pill-status-pulsante`	efeitos	precisa de um token de estado (`--ok`), que é decisão de arquitetura
`rodape-linha-minima`	rodape	alternativa enxuta ao `quatro-colunas`
`cabecalho-secao-com-video`	conteudo	fraco; o que vale é o gotcha, não o componente
`botao-equalizador`	navegacao	o comportamento não existe no original: não há `<audio>` nem listener. Catalogar exigiria escrever a metade que falta

O que ficou de fora, e por quê

Nav fixa, reveal de headline, .reveal, grain, .glass, .btn, .eyebrow, ticker, bloco "Sobre" — todos duplicam componente ou primitiva que a biblioteca já tem. O que vale de cada um é variação para a ficha existente, não entrada nova.
Seção CTA — o CSS (329–341) e a timeline (1034–1041) existem, mas não há <section class="cta"> no markup, e os oito href="#contato" da página são links mortos. Mesmo caso do .torn da Liberta: código previsto e nunca ligado.
.pill — apareceu cinco vezes no mesmo arquivo. Foi promovida ao core em 2026-08-31, antes da extração, para os três componentes não recopiarem a mesma regra.

Divergências conhecidas do original

prefers-reduced-motion funcionava pela metade: o bloco *{animation:none!important} desligava as animações CSS mas não tocava no GSAP, que escreve transform inline. Os componentes extraídos tratam de verdade.
Doze !important (.nav-cta, .deliver-video), proibidos pelo §6.2.
Google Fonts por @import, proibido em produção pelo §1.
JS inteiro em ES6 fora de IIFE, com gsap.registerPlugin no escopo global.

Um irmão útil

gabriel-rocha-studio.html (v1, mesma pasta) é 100% vanilla, sem nenhum <script src>, e implementa em IntersectionObserver/rAF várias coisas que o v2 refez em GSAP. Para faixa-invertida-scroll em especial, ele é porte direto, não reescrita — vale abrir antes de começar.