Motions premium em Next.js: os 16 padrões do site da Beetogreen, 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 @lottiefiles/dotlottie-react
2. Crie um componente client "SmoothScrollProvider" que:
   - Instancia Lenis com o easing do site auditado:
       new Lenis({
         easing: (t) => Math.min(1, 1.001 - Math.pow(2, -8 * t)),
         orientation: 'vertical',
         smoothWheel: true
       })
   - Sincroniza com ScrollTrigger usando função nomeada:
       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);
       lenis.off('scroll', ScrollTrigger.update);
       lenis.destroy();
   - Expõe via Context (useLenis) a instância + um estado isScrolling
     (do callback de scroll do Lenis), como faz o site auditado.
3. Registre plugins uma única vez em lib/gsap.ts:
   gsap.registerPlugin(ScrollTrigger, useGSAP); exporte gsap.
4. Crie o hook "useHasEntered(ref, { threshold })": IntersectionObserver
   once que retorna hasEntered (boolean). É o ÚNICO gatilho de reveal
   do site inteiro: cada seção o usa para ligar sua classe '--entered'.
5. Crie um util "splitWords(texto)" (e "splitLinesAndWords") que quebra
   strings em arrays de palavras no RENDER (server-friendly): o markup
   já chega ao browser com os spans de reveal prontos, sem medição.
6. Hook usePrefersReducedMotion(); componentes degradam quando true.
7. Tokens no globals.css (easings do site auditado):
   :root {
     --ease-reveal: cubic-bezier(0.77, 0, 0.175, 1);
     --ease-ui: cubic-bezier(0.645, 0.045, 0.355, 1);
     --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
     --dur-reveal: 1s;
   }
Entregue os arquivos completos e o layout.tsx atualizado.

Crie o sistema de reveal de palavras em Next.js:

1. Util puro "splitWords(text): string[]" e componente
   "RevealWords({ text, as, delay = 0, step = 0.04 })" que renderiza:
   <Tag aria-label={text}>
     {words.map((w, i) =>
       <span class="w" aria-hidden="true" key={i}>
         <span class="w-inner"
           style={{ '--d': `${delay + i * step}s` }}>{w}</span>
       </span>)}
   </Tag>
   (split no render = SSR perfeito, zero medição, zero flash)
2. CSS:
   .w { display: inline-block; overflow: hidden;
        vertical-align: bottom; margin-right: .1em;
        padding-bottom: .12em; }   /* respiro p/ descendentes (g, p) */
   .w-inner { display: inline-block; transform: translateY(110%);
     transition: transform var(--dur-reveal) var(--ease-reveal);
     transition-delay: var(--d, 0s); }
   [data-entered="true"] .w-inner,
   .--active .w-inner { transform: translateY(0); }
   .--past .w-inner { transform: translateY(-110%); }
   (o estado "passado" sai por cima: é o que permite trocas de
   conteúdo em fluxo contínuo nos Motions 8, 10 e 13)
3. Gatilho por seção: cada section usa useHasEntered(ref,
   { threshold: 0.2 }) e escreve data-entered no próprio nó. Um
   único IO por seção, nunca por palavra.
4. Variante "AnimatedParagraph": mesmo padrão com step menor (0.01)
   para parágrafos longos.
5. prefers-reduced-motion: .w-inner sem transition (estado final).

Crie utilitários "u-underline-out" e estados de botão em Next.js:

1. Underline que se apaga:
   .u-underline-out { position: relative; display: inline-block;
     overflow: hidden; vertical-align: top; }
   .u-underline-out::after { content: ''; position: absolute;
     bottom: 0; left: 0; width: 100%; height: 1px;
     background: currentColor; transform: scaleX(1);
     transform-origin: left center;
     transition: transform .7s var(--ease-reveal); }
   .u-underline-out:hover::after { transform: scaleX(0);
     transform-origin: right center; }
   (repouso: linha cheia; hover: apaga saindo pela direita;
   unhover: redesenha entrando pela esquerda)
2. Botão com loading:
   .button[data-loading="true"] .button__label { opacity: 0; }
   .button__spinner { position: absolute; inset: 0; margin: auto;
     width: 1.2em; aspect-ratio: 1; border-radius: 50%;
     border: 2px solid currentColor;
     border-right-color: transparent;
     animation: spin 0.8s linear infinite; opacity: 0; }
   .button[data-loading="true"] .button__spinner { opacity: 1; }
   @keyframes spin { to { transform: rotate(1turn) } }
   aria-busy="true" junto com data-loading.
3. Badge opcional no botão (contadores/etiquetas) como span
   posicionado, sem animação própria.
4. Hovers só em @media (hover: hover); focus-visible com ring.

Crie um componente "FadeMarquee" em Next.js (Server Component):

1. Props: duration ('30s'), direction ('normal' | 'reverse'),
   gap ('6rem'), itemHeight ('3.2rem'), tint ('none' | 'dark' |
   'light'), fadeEdges (true), children (itens).
2. Estrutura: div.marquee (overflow hidden, width 100%,
   style com as CSS vars) > ul.marquee__list (inline-flex, gap,
   white-space nowrap, will-change transform, class "mq") com os
   itens renderizados DUAS vezes (aria-hidden na segunda cópia).
3. CSS:
   .mq { animation: marquee var(--marquee-duration) linear infinite;
         animation-direction: var(--marquee-direction); }
   @keyframes marquee { from { transform: translate(0) }
     to { transform: translate(-50%) } }
   .marquee--fade { mask-image: linear-gradient(90deg,
     transparent 0, #000 8%, #000 92%, transparent);
     -webkit-mask-image: /* idem */; }
   .marquee--tint-dark .logo { filter: brightness(0); }
   .marquee--tint-light .logo { filter: brightness(0) invert(1); }
4. A matemática do -50% exige as duas cópias idênticas; gap incluído
   dentro da cópia (padding-right no último item ou gap no flex com
   cópia começando alinhada).
5. Pausa opcional no hover; prefers-reduced-motion: animation none
   (faixa estática com overflow-x auto para ainda ser explorável).

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

1. Painel fixed inset-0 z-[60] com background sólido (token) e o
   <DotLottieReact> do logo centralizado (autoplay, sem loop),
   inicialmente opacity 0.
2. Fluxo (useGSAP + useLenis):
   - onMounted: lenis.stop();
   - quando o player estiver pronto: gsap.to(lottieWrap,
     { opacity: 1, duration: 0.1, ease: 'power2.out' });
     const dur = player.getDuration();      // segundos
     agende a cortina em dur * WIPE_RATIO (const, ex. 0.6);
     fallback: se a duração não vier, dispare imediatamente.
   - Cortina: tl = gsap.timeline({ delay });
     tl.to(panel, { clipPath: 'inset(0 0 100% 0)', duration: 1.2,
       ease: 'expo.inOut' });
     tl.call(() => { lenis.start(); onPreloaderDone(); }, [], 0.5);
     // libera scroll e reveals NO MEIO da cortina, não no fim
     tl.call(() => removePanel());
3. onPreloaderDone() é o sinal que o hero (Motion 3) espera para
   ligar '--entered' na primeira dobra.
4. Rode uma vez por sessão (sessionStorage); demais visitas: sem
   painel, sinal imediato.
5. prefers-reduced-motion: painel com fade rápido, sem Lottie.

Crie o sistema de transição de rota em Next.js:

1. Componente "TransitionOverlay" (client, no layout raiz):
   div fixed inset-0 z-50 pointer-events-none visibility-hidden >
   svg (viewBox cobrindo a tela, scale 1.1, preserveAspectRatio
   "xMidYMid slice") > path do gesto (fill none, stroke currentColor,
   stroke-linecap round). Desenhe um path em S/diagonal que atravesse
   o viewBox; exponha setStrokeColor(cor).
2. API imperativa (Context): prepare(), playOut(cor), playIn():
   - prepare(): const len = path.getTotalLength();
     gsap.set(path, { strokeDasharray: len, strokeDashoffset: len,
       opacity: 0 }); gsap.set(svg, { scale: 1.1 });
   - playOut(cor): Promise que:
     seta a cor; gsap.set(wrapper, { pointerEvents: 'auto',
       visibility: 'visible', opacity: 1 });
     tl = gsap.timeline({ defaults: { duration: .7,
       ease: 'power1.inOut' } });
     tl.to(path, { opacity: 1, duration: .05 });
     tl.to(path, { strokeDashoffset: 0,
       attr: { 'stroke-width': 450 } }, '<');
     tl.call(() => { gsap.set(path, { strokeDashoffset: 0,
       attr: { 'stroke-width': 800 } }); resolve(); }, [], '>-0.2');
     // o salto final para 800 garante cobertura total sem custo
   - playIn(): Promise inversa (defaults .9s):
     ao completar, gsap.set(wrapper, { pointerEvents: 'none',
       visibility: 'hidden', opacity: 0 }) e reset do path
     (dashoffset = len, stroke-width 2, opacity 0).
   - SEMPRE mate a timeline anterior (tl?.kill()) antes de criar
     outra, e resolva a Promise uma única vez (flag).
3. "TransitionLink": intercepta o clique → await playOut(corDoDestino)
   → router.push → no template.tsx da nova rota, useEffect chama
   playIn() (e lenis.scrollTo(0, { immediate: true }) antes).
4. popstate: pule playOut; rode só playIn curto.
5. prefers-reduced-motion: substitua por fade de 0.3s no wrapper.

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

1. header fixed top-0 z-40 com container-cápsula lendo tokens:
   .nav { --nav-bg: #fff; --nav-text: var(--tk-ink); }
   .nav--dark { --nav-bg: var(--tk-ink); --nav-text: #fafafa; }
   .nav--accent { --nav-bg: var(--tk-accent); --nav-text: #fafafa; }
   .nav__container { background: var(--nav-bg); color: var(--nav-text);
     transition: background .35s var(--ease-soft),
                 color .35s var(--ease-soft); border-radius: 999px; }
2. Tema por seção: seções marcam data-nav-theme="dark|light|accent";
   um IO com rootMargin "-50% 0px -50% 0px" (linha do meio) observa
   e seta a variante do header conforme a seção sob o topo.
3. Dropdown desktop: ao abrir (hover/click com aria-expanded),
   renderize o painel dentro da cápsula e ligue o véu:
   .nav__overlay { position: fixed; inset: 0;
     background: rgb(0 0 0 / .3); opacity: 0; pointer-events: none;
     transition: opacity .35s var(--ease-soft); z-index: 0; }
   .nav__overlay--visible { opacity: 1; }
   Clique no véu fecha o dropdown; Escape idem.
4. O container do header fica acima do véu (z-index 1) e o conteúdo
   da página abaixo: o véu foca sem bloquear o próprio menu.
5. Lang switcher como dropdown compacto com a mesma mecânica.

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

1. Botão hambúrguer (aria-expanded, aria-controls) + overlay
   fullscreen (montado condicionalmente para o replay dos keyframes).
2. CSS:
   @keyframes tag-reveal { from { opacity: 0;
     transform: translateY(50%); } to { opacity: 1;
     transform: translateY(0); } }
   .mnav__item { opacity: 0;
     animation: tag-reveal .45s var(--ease-ui) forwards;
     animation-delay: calc(.15s + var(--i) * .06s); }
   .mnav__social { /* mesmo keyframe, delays após os itens */ }
   Passe --i por style inline no map dos itens.
3. Fundo do overlay com fade/slide próprio (.35s) antes da cascata.
4. Acessibilidade: inert no overlay fechado, Escape fecha, foco
   gerenciado (primeiro item ao abrir, botão ao fechar),
   lenis.stop()/start().
5. prefers-reduced-motion: sem keyframes (itens visíveis direto).

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

1. Itens com <button aria-expanded aria-controls> (pergunta em
   RevealWords) + ícone:
   .icon { position: relative; width: 2rem; height: 2rem; }
   .icon-line { position: absolute; top: 50%; left: 50%;
     background: currentColor;
     transition: transform .4s var(--ease-ui); }
   .icon-line--h { width: 100%; height: 1.5px;
     transform: translate(-50%, -50%); }
   .icon-line--v { height: 100%; width: 1.5px;
     transform: translate(-50%, -50%); }
   .item--open .icon-line--v { transform: translate(-50%, -50%)
     scaleY(0); }
2. Resposta:
   .answer-wrap { display: grid; grid-template-rows: 0fr;
     transition: grid-template-rows .5s var(--ease-ui); }
   .item--open .answer-wrap { grid-template-rows: 1fr; }
   .answer-inner { min-height: 0; overflow: hidden; }
3. Cascata pós-abertura: a resposta usa os spans do Motion 3 com:
   .item--open .answer .w-inner { transform: translateY(0);
     transition-delay: calc(0.3s + var(--d, 0s)); }
   (fechado, os inners voltam a translateY(110%) sem delay)
4. Um item aberto por vez (ou multi, por prop); Enter/Espaço nativos
   do button; divisórias de 1px entre itens.
5. prefers-reduced-motion: altura sem transition e palavras diretas.

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

1. Dados: items[] { quote, author, role, avatar? } + cores por props.
   Estados: index, cycleKey (número), paused; INTERVAL = 6000.
2. Autoplay: schedule() = clearTimeout + cycleKey++ +
   setTimeout(next, INTERVAL); chame schedule() quando a seção entra
   (useHasEntered threshold 0.3) e após cada next()/prev() se
   !paused; clique nas setas navega e re-agenda.
3. Anel na seta next:
   <button class="arrow arrow--next" onMouseEnter={pause}
     onMouseLeave={resume} onFocus={pause} onBlur={resume}>
     <svg key={cycleKey} class="ring"
       style={{ '--progress-duration': `${INTERVAL}ms` }}
       viewBox="0 0 50 50"><circle cx="25" cy="25" r="24"/></svg>
     <ArrowIcon/>
   </button>
   CSS: .ring circle { fill: none; stroke: currentColor;
     stroke-width: 1; stroke-dasharray: 151;    /* 2πr */
     stroke-dashoffset: 151;
     animation: ring-fill var(--progress-duration) linear forwards; }
   @keyframes ring-fill { to { stroke-dashoffset: 0 } }
   .arrow--paused .ring circle { animation-play-state: paused; }
   pause(): paused=true + clearTimeout; resume(): paused=false +
   schedule() (anel recomeça do zero via nova key).
4. Contador "01 / 05" (padStart) com aria-live="polite"; citação e
   autor trocam via Motion 11.
5. prefers-reduced-motion: sem autoplay nem anel (navegação manual).

Crie um componente "RewriteText" em Next.js:

1. Props: text, replayKey (a chave que força a remontagem), step
   (delay entre palavras, default 0.03), baseDelay (0.1).
2. Render:
   <p key={replayKey} aria-label={text} class="rewrite">
     {splitWords(`“${text}”`).map((w, i) =>
       <span class="w" aria-hidden="true">
         <span class="w-inner"
           style={{ animationDelay:
             `${baseDelay + i * step}s` }}>{w}</span></span>)}
   </p>
   (as aspas tipográficas entram como "palavras" e participam da
   cascata, como no site auditado)
3. CSS (keyframes, não transition: precisa rodar a cada remontagem):
   .rewrite .w { display: inline-block; overflow: hidden;
     padding-bottom: .12em; }
   .rewrite .w-inner { display: inline-block;
     transform: translateY(100%);
     animation: word-in .8s var(--ease-reveal) forwards; }
   @keyframes word-in { to { transform: translateY(0) } }
4. Use para citação, autor e contador do Motion 10 (chaves iguais,
   baseDelay maior nos secundários).
5. prefers-reduced-motion: animation none, transform none.

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

1. Dados: steps[] { label, smallLabel, title, description, imageUrl,
   bgColor, textColor } (CMS). Estados: active (índice),
   entered (useHasEntered threshold 0.2), manual (boolean).
2. Autoplay: ao entered, se !manual: timeout de 4000ms avança active
   (para no último); clique num passo seta manual=true, cancela o
   timeout e vai direto ao índice. Cleanup do timeout no unmount.
3. Section com style { backgroundColor: stepAtivo.bgColor,
   color: stepAtivo.textColor } e
   transition: background-color .8s var(--ease-ui), color .8s.
   Classes: --entered e --auto (entered && !manual).
4. Lista de passos: cada item com botão (aria-current="step" no
   ativo), rótulo em RevealWords e a linha:
   .step-line { height: 1px; background:
     color-mix(in srgb, currentColor 20%, transparent);
     overflow: hidden; }
   .step-line-fill { height: 100%; background: currentColor;
     transform: scaleX(0); transform-origin: left; }
   .step--active .step-line-fill { transform: scaleX(1);
     transition: transform .8s var(--ease-reveal); }
   .--auto .step--active .step-line-fill {
     transition: transform 4s linear; }   /* sincronizada ao autoplay */
5. Visual: camadas absolutas empilhadas na ordem dos steps:
   .layer { clip-path: inset(100% 0 0 0);
     transition: clip-path 1.2s var(--ease-reveal); }
   .layer--active, .layer--past { clip-path: inset(0 0 0 0); }
   .layer img { transform: scale(1.08); transition: transform 1.2s
     var(--ease-reveal); }
   .layer--active img { transform: scale(1); }
6. Conteúdo textual por step com estados --active/--past/--future
   alimentando o Motion 3 (palavras saem por cima, entram por baixo).
7. Formas decorativas (Motion 15) por step: camada com fade .6s e
   replay ao ativar.
8. prefers-reduced-motion: sem autoplay (navegação só por clique) e
   trocas por fade simples.

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

1. Estrutura: section.stats > div.stats__bg (100vh, o palco que
   pina) + N section.stats__card (cada um 100vh, conteúdo central
   com número/frase gigante). CSS: .stats { perspective: 1200px; }
   nos wrappers dos cards (necessário para o rotateX aparecer).
2. useGSAP (guarde os triggers num array para cleanup):
   const cards = gsap.utils.toArray('.stats__card');
   const last = cards[cards.length - 1];
   triggers.push(ScrollTrigger.create({ trigger: bgRef.current,
     start: 'top top', endTrigger: last, end: 'top top',
     pin: true, pinSpacing: false }));
   cards.forEach((card, i) => {
     triggers.push(ScrollTrigger.create({ trigger: card,
       start: 'top top', endTrigger: last, end: 'top top',
       pin: true, pinSpacing: false }));
     if (i < cards.length - 1) {
       const next = cards[i + 1];
       triggers.push(ScrollTrigger.create({ trigger: next,
         start: 'top bottom', end: 'top top', scrub: 0.5,
         onUpdate: (self) => {
           const p = self.progress;
           gsap.set(card, { rotate: 4 * p, rotateX: 36 * p,
             scale: 1 - 0.2 * p });
         } }));
     }
   });
   Cleanup: triggers.forEach(t => t.kill()).
   Nota: pinSpacing: false é o que faz os cards se ACUMULAREM (sem
   espaçadores); a altura total da seção = N viewports naturais.
3. Números dos cards podem usar RevealWords (Motion 3) ao entrar.
4. Mobile: desative (gsap.matchMedia >= 1024px) e caia para uma
   lista vertical simples; reduced-motion idem.
5. ScrollTrigger.refresh() após imagens/fonts (pin depende do
   layout final).

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

1. Tabs acessíveis (role=tablist/tab/tabpanel, aria-selected,
   setas de teclado). Estado: activeTab.
2. Com Framer Motion (recomendado):
   <AnimatePresence mode="wait">
     <motion.div key={activeTab} class="cards-grid"
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 10 }}
       transition={{ duration: 0.4,
         ease: [0.645, 0.045, 0.355, 1] }}>
       {cards.map(…)}
     </motion.div>
   </AnimatePresence>
   (mode="wait" garante: sai tudo, depois entra tudo)
3. Sem Framer: key={activeTab} + keyframe de entrada
   (opacity 0/y 10 → 1/0, .4s var(--ease-ui)); a saída vira corte
   seco: aceitável, mas registre o downgrade.
4. Títulos dos cards com RevealWords (delay em cascata pelos cards:
   --entry-delay = i * .08s).
5. Altura: reserve min-height do maior conjunto (medida no mount)
   para a troca não bombear o layout.

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

1. Props: fórmulas e fatores parametrizáveis (nada hard-coded de
   domínio); 3 sliders (input range estilizado com track/thumb
   custom) com rótulo e valor ao lado.
2. Cálculo: useMemo derivando resultado e N equivalências dos três
   valores; formatação com Number.prototype.toLocaleString(locale).
3. Número vivo: mantenha um ref { v: atual } e, a cada mudança do
   resultado, gsap.to(ref, { v: novo, duration: 0.4,
   ease: 'power2.out', onUpdate: () => el.textContent =
   format(ref.v) }); (contagem curta, não "slot machine")
4. Sliders acessíveis: label + aria-valuetext com unidade; passo e
   limites por props; atualização em onInput (não onChange) para o
   vivo de verdade.
5. Cartões de equivalência com micro-transition de opacity ao mudar
   (classe piscada) e RevealWords na entrada da seção.
6. prefers-reduced-motion: número troca direto, sem contagem.

Crie um componente "BrandShape" em Next.js:

1. Props: shape (chave num registry de SVGs da marca), position
   ({ top, left }), size ('60rem'), rotation (graus), color,
   centered (boolean), replayKey (opcional).
2. Render: div.shape (position absolute, pointer-events none,
   z-index 0, aria-hidden) com style { top, left, width: size,
   transform: `${centered ? 'translate(-50%,-50%)' : ''}
   rotate(${rotation}deg)` } > SVG (fill/stroke currentColor,
   color da prop).
3. Camadas por estado (uso no Motion 8): uma div.shape-layer por
   estado, absolute inset-0, opacity 0, transition opacity .6s
   var(--ease-reveal); a ativa ganha --active { opacity: 1 } e a
   forma interna com key={replayKey} remonta para reexecutar um
   keyframe de entrada leve (scale .96 → 1 + fade .6s).
4. Mobile: fator de escala (~0.6) aplicado ao size e recentragem
   (top/left 50% + centered), via prop ou matchMedia no pai.
5. As formas são sempre decorativas: nunca recebem foco nem eventos.

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

1. Estrutura: div.footer-wrap (ref externa) > footer.footer
   (ref interna) com colunas, sociais e créditos.
2. useGSAP (gate: matchMedia sem phone, reduced motion false):
   tween = gsap.from(innerRef.current, {
     yPercent: -25, ease: 'none',
     scrollTrigger: { trigger: wrapRef.current,
       start: 'clamp(top bottom)', end: 'clamp(bottom bottom)',
       scrub: true } });
   Cleanup: tween.scrollTrigger?.kill(); tween.kill();
   (clamp() nos dois pontos: essencial para rodapés, evita o trigger
   estourar em páginas mais curtas que o percurso)
3. Sociais com keyframe de cascata (mesmo padrão do Motion 7,
   social-reveal: opacity 0 + translateY(50%) → visível, delays
   por índice) disparado por useHasEntered no rodapé.
4. Botão "voltar ao topo":
   const toTop = () => lenis
     ? lenis.scrollTo(0, { duration: 1.5 })
     : window.scrollTo({ top: 0, behavior: 'smooth' });
5. Links com o underline do Motion 4.