Motions premium em Next.js: os 17 padrões do site da InterGest Canada, passo a passo

Em um projeto Next.js 14+ com App Router, TypeScript e Tailwind, configure a
infraestrutura de animação:

1. Instale: gsap @gsap/react lenis motion embla-carousel-react
2. Crie um componente client "SmoothScrollProvider" que:
   - Instancia Lenis com { lerp: 0.1, wheelMultiplier: 1, smoothWheel: true }
   - Sincroniza com ScrollTrigger usando uma função nomeada (necessária
     para o cleanup):
       const update = (time: number) => lenis.raf(time * 1000);
       lenis.on('scroll', ScrollTrigger.update);
       gsap.ticker.add(update);
       gsap.ticker.lagSmoothing(0);
   - Cleanup COMPLETO no unmount (nesta ordem):
       gsap.ticker.remove(update);        // sem isso o ticker segue
                                          // chamando raf() de uma
                                          // instância destruída (leak)
       lenis.off('scroll', ScrollTrigger.update);
       lenis.destroy();
   - Exponha a instância via React Context com um hook useLenis(), para
     outros componentes poderem chamar lenis.stop() / lenis.start()
     (o menu overlay do Motion 1 depende disso).
3. Registre os plugins uma única vez num arquivo lib/gsap.ts:
   gsap.registerPlugin(ScrollTrigger, SplitText, useGSAP) e exporte gsap.
   Esse arquivo só deve ser importado por componentes client.
4. Envolva {children} no layout.tsx raiz com <SmoothScrollProvider>.
5. Crie um hook usePrefersReducedMotion() que lê a media query
   (prefers-reduced-motion: reduce); todos os componentes de animação devem
   pular ou reduzir animações quando true.
Entregue os arquivos completos e o layout.tsx atualizado.

Crie um componente "FooterMarquee" em Next.js (pode ser Server Component —
não precisa de JS):

1. Estrutura:
   <div class="overflow-hidden whitespace-nowrap" aria-hidden="true">
     <div class="marquee-track inline-flex">
       <!-- GRUPO A: a frase repetida K vezes (ex.: 8x, via Array(K).map) -->
       <span>SUA FRASE AQUI&nbsp;·&nbsp;</span> ...
       <!-- GRUPO B: cópia idêntica do grupo A -->
     </div>
   </div>
   A regra é: o track contém DOIS grupos idênticos, cada um com
   exatamente 50% do conteúdo — é isso que faz a matemática do -50%
   fechar perfeitamente.
2. CSS (globals.css ou tailwind config):
   .marquee-track { animation: marquee 28s linear infinite; }
   @keyframes marquee {
     from { transform: translateX(0); }
     to   { transform: translateX(-50%); }
   }
   will-change: transform no track.
3. Pause opcional no hover: .marquee:hover .marquee-track
   { animation-play-state: paused; }
4. @media (prefers-reduced-motion: reduce) { .marquee-track
   { animation: none; } }
5. Acessibilidade: aria-hidden no marquee decorativo e uma versão do
   texto acessível (sr-only) fora dele.
6. Tipografia grande (text-4xl+), cor sutil (ex. texto vazado com
   -webkit-text-stroke ou opacidade baixa), gap consistente entre
   repetições.

Crie um componente "CtaButton" reutilizável em Next.js:

1. Props: href, children, variant: 'solid' | 'outline', external?: boolean.
2. Base (Tailwind): inline-flex items-center gap-2 rounded-full px-7 py-3.5
   relative overflow-hidden group.
3. Efeito "fundo que sobe": <span> absolute inset-0 na cor de hover com
   translate-y-full transition-transform duration-500
   ease-[cubic-bezier(0.76,0,0.24,1)] group-hover:translate-y-0;
   o label fica em <span class="relative z-10"> e troca de cor com
   transition-colors sincronizada.
4. Seta: ícone → com transition-transform duration-300
   group-hover:translate-x-1.5.
5. Elemento raiz animado:
   - Rotas INTERNAS: use next/link com Framer Motion:
     const MotionLink = motion.create(Link)  // motion(Link) em versões
                                             // anteriores da lib
     <MotionLink href={href} whileTap={{ scale: 0.97 }}
       transition={{ type:'spring', stiffness: 400, damping: 17 }} />
     (preserva prefetch e client-side navigation do App Router)
   - Links EXTERNOS: motion.a com target="_blank" rel="noopener".
6. Estados de foco visíveis (focus-visible:ring) — nunca remova outline
   sem substituir.

Crie um componente client "CookieBanner" em Next.js:

1. useEffect verifica localStorage.getItem('cookie-consent'); se ausente,
   seta visible=true após delay de 1500ms (setTimeout com cleanup).
2. Renderize com <AnimatePresence>: motion.div fixed bottom-6 left-6,
   initial { y: 80, opacity: 0 }, animate { y: 0, opacity: 1 },
   exit { y: 80, opacity: 0 }, transition spring
   { stiffness: 260, damping: 24 }.
3. Botões "Aceitar" e "Rejeitar": ao clicar, salvam
   'accepted'/'rejected' no localStorage e setam visible=false
   (o exit anima a saída).
4. Nunca renderize no SSR (retorne null até o efeito rodar) para evitar
   hydration mismatch.
5. Inclua link para a rota INTERNA da política de privacidade do próprio
   projeto (ex.: /legal/privacy-policy), nunca URL de staging ou domínio
   externo.

Crie um componente client "HeroTitle" em Next.js com GSAP:

1. Importe gsap e SplitText de lib/gsap.ts (plugins já registrados) e o hook
   useGSAP de @gsap/react.
2. H1 com ref, contendo o texto com <strong> nas palavras de destaque.
   Aplique visibility:hidden inline no H1 para evitar FOUC (flash do texto
   sem animação antes do JS rodar).
3. Dentro de useGSAP (scope no container), use a API moderna do SplitText
   (3.13+) com autoSplit, que espera as fontes carregarem e re-splita
   automaticamente se o layout mudar:
   SplitText.create(h1Ref.current, {
     type: 'lines,words',
     linesClass: 'line',
     mask: 'lines',          // cria wrappers overflow:hidden automáticos
     autoSplit: true,        // aguarda document.fonts.ready internamente
     onSplit: (self) => {
       gsap.set(h1Ref.current, { visibility: 'visible' });
       return gsap.from(self.words, {
         yPercent: 110, duration: 0.9,
         ease: 'power4.out', stagger: 0.06, delay: 0.2
       });                   // retornar o tween faz o autoSplit
     }                       // gerenciar o cleanup sozinho
   });
   (Alternativa sem autoSplit: envolva o split em
   document.fonts.ready.then(() => { ... }) e chame split.revert()
   no cleanup. Nunca faça o split antes das fontes carregarem, senão
   as quebras de linha ficam erradas.)
4. Se prefers-reduced-motion, apenas remova o hidden sem animar.

Estenda o componente HeroTitle para uma seção "Hero" completa:

1. Estruture: h1 (split do motion 3), p.slogan, p.descricao, a.cta — todos
   com classes de seleção dentro do scope do useGSAP.
2. Dentro do onSplit do SplitText (ou após o fonts.ready), crie UMA
   gsap.timeline({ defaults: { ease: 'power3.out' } }):
   - tl.from(split.words, { yPercent: 110, stagger: 0.06, duration: 0.9 })
   - tl.from('.slogan', { y: 30, autoAlpha: 0, duration: 0.6 }, '-=0.45')
   - tl.from('.descricao', { y: 30, autoAlpha: 0, duration: 0.6 }, '-=0.4')
   - tl.from('.cta', { y: 20, autoAlpha: 0, scale: 0.96, duration: 0.5 },
     '-=0.35')
   Retorne a timeline no onSplit para o cleanup automático.
3. As sobreposições negativas ('-=') fazem os elementos entrarem em
   overlap, dando fluidez (nunca espere um terminar 100% para começar
   o próximo).
4. Use autoAlpha (opacity + visibility) em vez de só opacity, para
   elementos invisíveis não capturarem cliques.

No componente Hero do Next.js, adicione o vídeo de fundo:

1. Estrutura: section relative h-svh overflow-hidden
   - <video> absolute inset-0 w-full h-full object-cover -z-10 com os
     atributos: autoPlay, muted, loop, playsInline,
     preload="metadata", poster="/hero-poster.webp"
     e <source src="/hero.webm" type="video/webm" /> seguido de
     <source src="/hero.mp4" type="video/mp4" /> (webm antes do mp4:
     o browser usa a primeira source suportada).
   - Overlay: div absolute inset-0 bg-black/40 (legibilidade do texto).
   - Atenção ao stacking: -z-10 pressupõe que a section não tenha
     background próprio cobrindo o vídeo.
2. IMPORTANTE (React): o atributo muted às vezes não é aplicado no SSR
   (issue conhecida do React); garanta via ref em useEffect:
   videoRef.current.muted = true e chame .play().catch(() => {})
   para cobrir políticas de autoplay.
3. Performance: vídeo comprimido em H.264 (mp4) + AV1/VP9 (webm),
   máx ~2-4MB, 1080p, sem faixa de áudio embutida.
4. Acessibilidade: se prefers-reduced-motion, pause o vídeo e mostre
   apenas o poster.

Crie um componente client "FeatureCards" em Next.js:

1. Grid de N cards (grid-cols-1 md:grid-cols-2 xl:grid-cols-4, gap-6).
   Card: figure com overflow-hidden rounded-2xl contendo next/image
   (fill, object-cover), número editorial (01, 02...), h3 e parágrafo.
2. Reveal com GSAP dentro de useGSAP (scope no container):
   ScrollTrigger.batch('.card', {
     start: 'top 85%',
     once: true,
     onEnter: (batch) => gsap.fromTo(batch,
       { y: 60, autoAlpha: 0 },
       { y: 0, autoAlpha: 1, duration: 0.8, ease: 'power3.out',
         stagger: 0.12 })
   })
   Estado inicial via gsap.set('.card', { autoAlpha: 0 }) para não piscar.
3. Hover zoom em CSS: no card use class "group"; na imagem:
   transition-transform duration-700 ease-out group-hover:scale-110.
   No número: transition-colors group-hover:text-[cor-de-marca].
4. Imagens com next/image, sizes corretos e placeholder blur.
5. once:true garante que a cascata rode uma única vez (não repete ao
   rolar para cima e para baixo).

Crie um componente client "StatsGrid" em Next.js com contadores GSAP:

1. Dados: array de N itens com o tipo:
   type Stat = {
     label: string;        // nome do indicador
     value: number;        // valor numérico final
     prefix?: string;      // ex.: 'R$', 'C$', '+', '+C$'
     suffix?: string;      // ex.: 'B', 'K', 'M', '%'
     decimals?: number;    // OBRIGATÓRIO quando o valor tem casas
                           // significativas (ex.: 1.46 → decimals: 2)
     description: string;
   };
2. Grid responsivo (2 → 5 colunas). Cada card: label, h3 do número
   (ref via data-attribute), parágrafo.
3. Contador: dentro de useGSAP, para cada card:
   const obj = { val: 0 };
   gsap.to(obj, {
     val: item.value,
     duration: 1.6,
     ease: 'power2.out',
     scrollTrigger: { trigger: el, start: 'top 85%', once: true },
     onUpdate: () => {
       el.textContent = (item.prefix ?? '') +
         new Intl.NumberFormat('en-CA', {
           minimumFractionDigits: item.decimals ?? 0,
           maximumFractionDigits: item.decimals ?? 0
         }).format(obj.val) +
         (item.suffix ?? '');
     }
   });
   (Fixar minimum = maximum evita o número "tremendo" de largura
   durante a contagem; considere também font-variant-numeric:
   tabular-nums no h3.)
4. Reveal dos cards em cascata com ScrollTrigger.batch (stagger 0.08,
   y: 40 → 0, autoAlpha), mesmo padrão do Motion 7.
5. SSR/SEO: renderize o VALOR FINAL formatado no HTML inicial
   (server-friendly) e só zere/anime no client após montar — assim o
   buscador indexa o número real e usuários sem JS veem o dado.
6. prefers-reduced-motion: pule a contagem e mostre o valor direto.

Crie um componente client "AdvantageBlocks" em Next.js:

1. N blocos empilhados; cada bloco: hr decorativa no topo, h3 e parágrafo.
2. Em useGSAP, itere gsap.utils.toArray('.advantage'):
   para cada bloco crie uma timeline com scrollTrigger
   { trigger: bloco, start: 'top 80%', once: true }:
   - Linha: fromTo scaleX 0 → 1, transformOrigin 'left center',
     duration 0.8, ease 'power2.inOut'
   - h3: from { y: 40, autoAlpha: 0 }, duration 0.7, position '-=0.4'
   - p: from { y: 24, autoAlpha: 0 }, duration 0.7, position '-=0.5'
3. Estados iniciais setados via gsap.set para evitar flash.
4. Opcional: transformar em accordion (Radix UI Accordion + animação de
   height com grid-template-rows: 0fr → 1fr em CSS) caso o design final
   peça blocos expansíveis por clique.

Crie um componente client "EditorialParallax" em Next.js:

1. Section relative com min-h-[120vh]; título central enorme em 2 linhas
   (com <strong> em palavras de destaque); 2-4 imagens (next/image)
   posicionadas absolute em pontos assimétricos (ex.: top-left pequena,
   right-center média, bottom-left grande), cada uma com atributo
   data-speed: ex. 0.4, 0.8 e 1.4.
2. Em useGSAP, itere gsap.utils.toArray('[data-speed]') e para cada:
   gsap.to(el, {
     yPercent: -30 * parseFloat(el.dataset.speed),
     ease: 'none',
     scrollTrigger: {
       trigger: sectionRef.current,
       start: 'top bottom',
       end: 'bottom top',
       scrub: true
     }
   });
   ease 'none' é obrigatório em scrub (a "suavização" vem do scroll).
3. O título entra com o padrão SplitText do Motion 3, mas disparado por
   ScrollTrigger (start 'top 75%', once) em vez de load.
4. Compense o deslocamento: posicione as imagens levemente "adiantadas"
   para que fiquem enquadradas quando a seção estiver no centro da tela.
5. Desative o parallax em mobile via gsap.matchMedia('(min-width:768px)')
   — em telas pequenas gera custo de performance sem ganho visual.

Crie um componente client "HistoryTimeline" em Next.js com Embla Carousel:

1. Instale embla-carousel-react. Dados: array de N marcos
   { label: string, title: string, description: string }
   (label pode ser ano, número de etapa etc.).
2. const [emblaRef, emblaApi] = useEmblaCarousel({ align: 'start',
   dragFree: false, skipSnaps: false })
3. Estrutura: div.embla overflow-hidden (ref) > div.embla__container flex >
   slides com flex: 0 0 70% (desktop) / 0 0 85% (mobile), gap-8.
   Cada slide: label em texto text-7xl font-bold + card com título e texto.
4. Botões Prev/Next chamam emblaApi.scrollPrev()/scrollNext(); desabilite
   (opacity-30, cursor-default) nas extremidades usando
   emblaApi.canScrollPrev()/canScrollNext() sincronizados via evento
   'select' num useEffect (com cleanup do listener).
5. Slide ativo: use selectedScrollSnap() para aplicar classe de destaque
   (label em cor de marca, card com scale 1; inativos com opacity-50).
   Transições via CSS transition-all duration-500.
6. Linha horizontal decorativa atravessando os marcadores (pseudo-elemento
   ou div absoluta) com um ponto em cada estação.
7. Extra: reveal da seção inteira com GSAP ScrollTrigger
   (y:60→0, autoAlpha, once: true) quando entra no viewport.

Crie um componente client "NumberedCarousel" em Next.js com Embla:

1. Instale embla-carousel-react e embla-carousel-autoplay.
2. Dados: N itens { index: '01', title, description }.
3. useEmblaCarousel({ loop: true }, [Autoplay({ delay: 6000,
   stopOnInteraction: true })]). Autoplay é opcional: exponha via prop.
4. Layout: grid 2 colunas — esquerda: imagem-conceito fixa (next/image)
   que NÃO troca; direita: viewport do Embla com os N painéis de texto.
   (Variação: se cada item tiver imagem própria, sincronize a troca da
   imagem com o evento 'select'.)
5. Navegação inferior: setas prev/next + fileira de marcadores numerados
   gerados de scrollSnapList(); clique chama scrollTo(i).
   Marcador ativo: cor de marca + underline animado
   (after:scale-x-0 → after:scale-x-100 com transition, origin-left);
   inativos: opacity-40.
6. Sincronize o índice ativo com o evento 'select' do emblaApi em
   useEffect (com cleanup do listener).
7. Micro-motion interna: quando o slide muda, anime o h3 e o parágrafo
   do painel ativo com Framer Motion (key={selectedIndex} em um
   motion.div com initial { y: 24, opacity: 0 } → animate { y:0,
   opacity:1 }, duration 0.5) para o texto "entrar" a cada troca.
8. Acessibilidade: aria-label nas setas, role="tablist"/"tab" nos dots,
   pausa do autoplay em hover/focus.

Crie um componente client "ProcessSection" em Next.js com GSAP ScrollTrigger:

1. Layout: section > div.wrapper (grid 2 colunas; esquerda = imagem-conceito
   com next/image; direita = div.steps relative onde os N painéis de step
   ficam empilhados com position absolute inset-0).
   Opcional: uma coluna/área extra de links relacionados (ex.: lista de
   serviços + botão "ver mais"), se o design pedir; ela fica fora da área
   animada dos steps.
2. Cada painel: label "Step N", h3 e lista de bullets.
   Estado inicial: painel 1 visível; demais com autoAlpha 0 e y 40.
3. Dentro de useGSAP, envolva TUDO em gsap.matchMedia():
   const mm = gsap.matchMedia();
   mm.add('(min-width: 1024px)', () => {
     const tl = gsap.timeline({
       scrollTrigger: {
         trigger: wrapperRef.current,
         start: 'top top',
         end: '+=200%',            // ~2 viewports de rolagem "presa";
                                   // ajuste proporcional ao nº de steps
         pin: true,
         scrub: 0.8,
         anticipatePin: 1
       }
     });
     tl.to('.step-1', { autoAlpha: 0, y: -40, duration: 1 })
       .fromTo('.step-2', { autoAlpha: 0, y: 40 },
                          { autoAlpha: 1, y: 0, duration: 1 }, '<0.2')
       .to('.step-2', { autoAlpha: 0, y: -40, duration: 1 }, '+=0.5')
       .fromTo('.step-3', { autoAlpha: 0, y: 40 },
                          { autoAlpha: 1, y: 0, duration: 1 }, '<0.2');
     // generalize em loop para N steps
   });
   mm.add('(max-width: 1023.98px)', () => {
     // mobile: sem pin; steps empilhados com reveal simples
     // (y + autoAlpha, ScrollTrigger once por step)
   });
4. Adicione um indicador de progresso vertical (pontos ou barra) que
   acende conforme o progresso — use onUpdate do ScrollTrigger.
5. Na imagem-conceito, um parallax sutil: gsap.to(imagem, { y: -30,
   scrollTrigger: { trigger: wrapper, scrub: true } }).
6. Como o projeto pode usar Lenis, garanta que o ScrollTrigger já esteja
   sincronizado (Prompt 0). Chame ScrollTrigger.refresh() após carregar
   as imagens da seção.

Crie um componente client "FrameSequenceRotator" em Next.js:

1. N imagens em /public/sequence/frame-1.webp ... frame-N.webp
   (mesmo tamanho, mesma posição do objeto, ângulos progressivos
   cobrindo 360°).
2. Componente com <canvas ref> width/height fixos (ex. 800x800, exibido
   responsivo via CSS w-full max-w-md aspect-square).
3. Em useEffect: pré-carregue as N imagens
   (new Image(), promise em img.onload; Promise.all antes de animar).
   Desenhe o frame 0 assim que carregar.
4. VERSÃO A — rotação automática em loop contínuo:
   const frame = { i: 0 };
   const total = images.length;
   gsap.to(frame, {
     i: total,                       // até N (não N-1) + módulo abaixo:
     duration: 2.2,                  // garante wrap sem "soquinho"
     ease: 'none',                   // no salto do último para o
     repeat: -1,                     // primeiro frame
     snap: 'i',                      // trava em inteiros
     onUpdate: () => {
       ctx.clearRect(0, 0, w, h);
       ctx.drawImage(images[frame.i % total], 0, 0, w, h);
     }
   });
5. VERSÃO B — controlado por scroll (efeito Apple): mesma tween, mas sem
   repeat, i: 0 → total - 1, e com scrollTrigger { trigger: section,
   start: 'top bottom', end: 'bottom top', scrub: true } — o objeto gira
   conforme a rolagem. Implemente as duas atrás de uma prop
   mode: 'auto' | 'scroll'.
6. Só anime quando visível (ScrollTrigger com onToggle pausando/retomando
   a tween, ou IntersectionObserver) para economizar CPU.
7. Textos da seção (h2 + CTA) entram com o padrão de reveal dos motions
   3-4 via ScrollTrigger.
8. Cleanup: kill na tween e nos observers ao desmontar (o useGSAP com
   scope cobre a tween se ela for criada dentro do contexto).

Crie um componente client "NewsletterForm" em Next.js:

1. react-hook-form + zod para validar o e-mail; envio via Server Action
   (app router) com estados: 'idle' | 'loading' | 'success' | 'error'
   em useState.
2. Renderização com <AnimatePresence mode="wait">:
   - status !== 'success': motion.form key="form" com input + botão;
     exit { opacity: 0, y: -10 }.
   - status === 'success': motion.p key="ok" initial { opacity:0, y:10 }
     animate { opacity:1, y:0 } — mensagem de sucesso do projeto.
   - status === 'error': motion.p key="err" com shake sutil:
     animate={{ x: [0, -6, 6, -4, 4, 0] }} transition 0.4s, cor vermelha.
3. Botão em loading: spinner + disabled + leve scale 0.98.
4. Reserve min-height no wrapper para evitar layout shift na troca.
5. Foco/acessibilidade: aria-live="polite" na região das mensagens.

Implemente o seletor de idioma em Next.js:

1. Configure next-intl com os locales do projeto (ex.: ['pt', 'en']) e
   routing por prefixo (/en/...). Crie messages/<locale>.json para cada.
2. Componente "LocaleSwitcher": use os helpers de navegação do next-intl
   (createNavigation → { Link, useRouter, usePathname }) para trocar o
   locale preservando a rota atual.
3. Estilo do link: relative, com after: absolute bottom-0 left-0 h-px
   w-full bg-current scale-x-0 origin-left transition-transform
   duration-300 hover:after:scale-x-100 (sublinhado que se desenha).
4. Marque o idioma ativo (aria-current, peso de fonte) e defina o
   atributo lang correto no <html>.
5. A transição de página pode ganhar um fade global: envolva o children
   do layout num template.tsx com Framer Motion (motion.div initial
   { opacity: 0 } animate { opacity: 1 } duration 0.35) — o template.tsx
   remonta a cada navegação, disparando a animação.

Crie um componente Next.js client "FullscreenMenu" com Framer Motion:

1. Um botão hambúrguer no header controla o estado open (useState). O ícone
   anima entre hambúrguer e X (duas linhas que rotacionam 45°/-45°).
2. Use <AnimatePresence> para montar/desmontar o overlay:
   - Overlay: div fixed inset-0 z-50, fundo escuro; entra com
     clipPath: 'inset(0 0 100% 0)' → 'inset(0 0 0% 0)' (efeito cortina
     de cima para baixo), duration 0.7, ease [0.76, 0, 0.24, 1];
     na saída, reverte.
3. Links de navegação (quantidade parametrizável via array) usam variants:
   - container: staggerChildren: 0.07, delayChildren: 0.3
   - item: hidden { y: '110%', opacity: 0 } → visible { y: 0, opacity: 1 },
     duration 0.6, ease easeOut. Cada link fica dentro de um wrapper com
     overflow-hidden para o efeito de "máscara" (texto surgindo de baixo).
4. Coluna lateral opcional com cards de conteúdo: fade + y:20, delay 0.5.
5. Trava de scroll enquanto aberto:
   - Com Lenis: chame lenis.stop() ao abrir e lenis.start() ao fechar
     (via hook useLenis do Prompt 0). Adicione data-lenis-prevent no
     container do overlay se ele tiver conteúdo rolável interno.
   - Sem Lenis: document.body.style.overflow = 'hidden' com restore no
     cleanup.
6. Feche com tecla Escape e implemente focus trap (foco preso dentro do
   overlay enquanto aberto; ao fechar, devolva o foco ao botão hambúrguer).
7. Respeite prefers-reduced-motion: se ativo, use apenas fade rápido.
Tipografia grande (text-5xl+), links com hover que desloca 8px para a direita.