DEV Community: Evenilson Liandro

Efeito de máquina de escrever com React usando requestAnimationFrame

Evenilson Liandro — Mon, 16 Jun 2025 16:48:05 +0000

Quando navegamos em sites com apelo visual — portfólios, landing pages, hero sections — é comum vermos efeitos de texto digitando automaticamente, como uma máquina de escrever. Embora pareça simples, muitos exemplos ainda usam setTimeout ou setInterval para isso.

Mas se buscamos algo mais preciso, performático e responsivo, o requestAnimationFrame é o caminho certo.

O problema de `setTimeout` ou `setInterval`

Essas abordagens funcionam, mas têm sérias desvantagens:

Não são sincronizadas com o render do navegador
Continuam rodando mesmo se a aba estiver em segundo plano
Consomem mais CPU em animações longas
Podem criar efeitos instáveis se o usuário mudar de aba ou se a aplicação for pesada

Usar `requestAnimationFrame` é o caminho

O requestAnimationFrame é uma API nativa do navegador feita para isso. Ele:

Executa o código antes de cada frame ser renderizado
Suspende automaticamente quando a aba fica em segundo plano
Garante maior precisão temporal e fluidez
É a base de qualquer animação moderna, como Framer Motion, GSAP, etc.

O hook `useTypeWriter` com React

Vamos criar um hook chamado useTypeWriter, que:

Digita e apaga uma lista de frases
Permite configurar a velocidade de digitação e remoção
Suporta loop e pausas entre as frases
Usa apenas React e requestAnimationFrame (sem libs externas)


import { useEffect, useRef, useState } from "react";

interface UseTypeWriterProvider {
  texts: string[];
  writeSpeed?: number;
  eraseSpeed?: number;
  pauseBeforeDelete?: number;
  pauseBetweenPhrases?: number;
  loop?: boolean;
  onCycleComplete?: () => void;
}

export function useTypeWriter({
  texts,
  writeSpeed = 100,
  eraseSpeed = 50,
  pauseBeforeDelete = 1000,
  pauseBetweenPhrases = 500,
  loop = false,
  onCycleComplete = () => { }
}: UseTypeWriterProvider) {
  const [displayed, setDisplayed] = useState(""); // Current visible text

  // Refs to control typing state without causing re-renders
  const animationFrameRef = useRef<number | null>(null);  // ID from requestAnimationFrame 
  const lastFrameTimeRef = useRef<number>(0);             // Timestamp of the last frame
  const charIndexRef = useRef<number>(0);                 // Current character index
  const phraseIndexRef = useRef<number>(0);               // Current phrase index   
  const isDeletingRef = useRef<boolean>(false);           // Whether we are currently deleting
  const pauseUntilRef = useRef<number | null>(null);      // Pause between transitions

  useEffect(() => {
    let isCancelled = false;

    // Cancel any ongoing animation before starting a new one
    if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);

    const step = (time: number) => {
      if (isCancelled) return;
      const currentText = texts[phraseIndexRef.current] || "";

      // Handle pauses (e.g., between typing and deleting)
      if (pauseUntilRef.current && time < pauseUntilRef.current) {
        animationFrameRef.current = requestAnimationFrame(step);
        return;
      };

      const delta = time - lastFrameTimeRef.current;
      const speed = isDeletingRef.current ? eraseSpeed : writeSpeed;

      // Continue only if the delay time has passed
      if (delta >= speed) {
        if (!isDeletingRef.current) {
          // Typing mode
          charIndexRef.current = Math.min(charIndexRef.current + 1, currentText.length);
          setDisplayed(currentText.slice(0, charIndexRef.current));

          // Reached the end of the phrase
          if (charIndexRef.current >= currentText.length) {
            isDeletingRef.current = true;
            pauseUntilRef.current = time + pauseBeforeDelete; // Wait before deleting
          }
        } else {
          // Deleting mode
          charIndexRef.current -= 1;
          setDisplayed(currentText.slice(0, charIndexRef.current));

          // Finished deleting
          if (charIndexRef.current <= 0) {
            isDeletingRef.current = false;
            const nextIndex = phraseIndexRef.current + 1;

            if (nextIndex >= texts.length) {
              if (loop) {
                phraseIndexRef.current = 0;
              } else {
                onCycleComplete?.(); // Notify parent
                return; // Stop animation
              }
            } else {
              phraseIndexRef.current = nextIndex;
            }
            charIndexRef.current = 0;
            pauseUntilRef.current = time + pauseBetweenPhrases; // Pause briefly before typing the next phrase
          }
        }
        lastFrameTimeRef.current = time; // Update last action time
      }

      // Keep animation going
      animationFrameRef.current = requestAnimationFrame(step);
    };

    // Start animation loop
    animationFrameRef.current = requestAnimationFrame(step);

    // Clean up on unmount or re-run
    return () => {
      isCancelled = true;
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };

  }, [writeSpeed, eraseSpeed, loop, texts, onCycleComplete, pauseBeforeDelete, pauseBetweenPhrases]);

  return displayed
}

Exemplos de uso

import { useTypeWriter } from "./hooks"

export function App() {
  const text = useTypeWriter({
    texts: ["Hello, world!", "Welcome to my site."],
    writeSpeed: 100,
    eraseSpeed: 50,
    loop: true
  })

  return (
    <main className="bg-zinc-900 w-full h-screen flex items-center justify-center">
      <span className="text-zinc-100 text-7xl">{text}</span>
    </main>
  )
}

Conclusão

Esse hook é muito bom para:

Hero sections de portfólios
Interfaces de onboarding
Aplicações com personalidade e movimento E sem depender de libs externas.

Curtiu o hook? Veja o código no GitHub e compartilhe com alguém que curte animações em React:
github.com/evenilson/use-typewriter

Como criar um scrollspy moderno com React e IntersectionObserver

Evenilson Liandro — Wed, 11 Jun 2025 18:16:32 +0000

Quando navegamos em landing pages modernas, é comum vermos o menu se adaptando automaticamente conforme o usuário rola a página. Esse efeito é conhecido como scrollspy, e melhora a experiência de navegação, além de dar um toque profissional ao site.

Neste artigo, vamos demonstrar como implementar um scrollspy moderno utilizando React e a API nativa IntersectionObserver, garantindo precisão, performance e manutenção limpa.

Por que devemos evitar `scrollY` e `offsetTop`

O window.scrollY ainda é comumente utilizado, geralmente em conjunto com element.offsetTop ou getBoundingClientRect(). Embora funcionem, essas abordagens apresentam desvantagens importantes:

Exigir cálculos manuais e constantes;
Precisam de event listeners em scroll (impactando a performance);
Reagem mal a mudanças de layout ou responsividade.

Utilizando o IntersectionObserver, podemos observar elementos e reagir automaticamente à visibilidade real deles na tela. Ele notifica o navegador quando um elemento entra ou sai da tela, com menos código e mais eficiência, já que foi projetado exatamente para esse tipo de tarefa.

O IntersectionObserver

IntersectionObserver é uma API nativa do navegador que permite detectar quando um elemento entra ou sai da área visível (viewport).

Quando utilizar:

Scrollspy
Lazy loading de imagens
Animações disparadas no scroll
Análise de comportamento do usuário

Exemplo simples de como a API funciona

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if(entry.isIntersecting) {
            console.log(`${entry.target.id} está visível`);
        }
    });
});

observer.observe(document.getElementById("home"));

O código acima começa a observar a seção com id="home" e imprime no console quando ela se torna visível na tela.

Criação do hook `useActiveSection` com React

Aqui o objetivo é criar um hook reutilizável responsável por detectar qual seção da página está mais visível. Isso será usado para destacar automaticamente o item ativo no menu.

Como funciona

Recebe refs para as seções;
Usa o IntersectionObserver para monitorar visibilidade;
Calcula a área visível real de cada seção;
Atualiza o estado com a seção mais visível;
Utiliza MutationObserver para aguardar dinamicamente o momento em que as refs se tornam disponíveis.
Utiliza RequestAnimationFrame para garantir que o DOM esteja completamente renderizado antes de inicializar o IntersectionObserver. Isso é essencial para compatibilidade com React 18+, que utiliza o modo Strict em desenvolvimento e pode montar componentes duas vezes.
(Opcional) Utiliza requestAnimationFrame como fallback para garantir a ativação correta da primeira seção visível. Útil em cenários onde o conteúdo estático não dispara o IntersectionObserver imediatamente, como após SSR ou renderização instantânea de várias seções fora do viewport.

Código do hook

import React, { useEffect, useRef, useState } from "react";

interface SectionRefMap {

}

export function useActiveSection(sectionRefs: SectionRefMap, rootMargin = "-40% 0px -40% 0px", enableFallback = true) {
  const [activeSection, setActiveSection] = useState<string | null>(null);

  const observer = useRef<IntersectionObserver | null>(null);
  const currentId = useRef<string | null>(null);
  const hasInitialized = useRef(false);
  const fallbackRafId = useRef<number | null>(null);

  useEffect(() => {
    const refEntries = Object.entries(sectionRefs);
    const allAvailableSections = refEntries.every(([, ref]) => ref.current !== null);

    // Prevent multiple initializations
    if (hasInitialized.current) return;

    if (allAvailableSections) {
      requestAnimationFrame(() => {
        if (!hasInitialized.current) {
          initializeObserver();
        }
      })
    } else {
      // Wait until all refs are assigned
      const mo = new MutationObserver(() => {
        const ready = refEntries.every(([, ref]) => ref.current !== null);
        if (ready) {
          mo.disconnect();
          requestAnimationFrame(() => {
            if (!hasInitialized.current) {
              initializeObserver();
            }
          })
        }
      });
      mo.observe(document.body, {
        childList: true,
        subtree: true,
      });
      return () => mo.disconnect();
    }

    function initializeObserver() {
      if(hasInitialized.current) return;
      hasInitialized.current = true;
      // Create observer to track visible sections
      observer.current = new IntersectionObserver(
        (observerEntries) => {
          const visibleEntries = observerEntries
            .filter(entry => entry.isIntersecting)
            .map((entry) => ({
              entry,
              area:
                entry.intersectionRect.width * entry.intersectionRect.height,
            }))
            .sort((a, b) => b.area - a.area);

          // Set the section with the largest visible area
          if (visibleEntries.length > 0) {
            const id = visibleEntries[0].entry.target.getAttribute("id");
            if (id && id !== currentId.current) {
              currentId.current = id;
              setActiveSection(id);
            }
          }
        },
        {
          rootMargin,
          threshold: Array.from({ length: 11 }, (_, i) => i / 10),
        }
      );

      // Start observing all section elements
      for (const [, ref] of refEntries) {
        if (ref.current) {
          observer.current.observe(ref.current);
        }
      }

      // Optional: fallback using requestAnimationFrame to detect visible sections on first render
      if (enableFallback) {
        fallbackRafId.current = requestAnimationFrame(() => {
          const visibleSections = refEntries
            .map(([key, ref]) => {
              if (!ref.current) return null;
              const rect = ref.current.getBoundingClientRect();
              const visibleHeight = Math.max(0, Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0));
              const visibleWidth = Math.max(0, Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0));
              const area = visibleHeight * visibleWidth;
              return { key, area };
            })
            .filter(Boolean)
            .sort((a, b) => b!.area - a!.area);

          if (visibleSections.length > 0) {
            const firstVisibleSection = visibleSections[0]!;
            if (firstVisibleSection?.key !== currentId.current) {
              currentId.current = firstVisibleSection.key;
              setActiveSection(firstVisibleSection.key);
            }
          }
        });
      }
    }

    // Cleanup: unobserve all sections
    return () => {
      if(observer.current) {
        for (const [, ref] of refEntries) { 
          if (ref.current && observer.current) {
            observer.current.unobserve(ref.current);
          }
        }
        observer.current?.disconnect();
        observer.current = null;
      }
      if(fallbackRafId.current !== null) {
        cancelAnimationFrame(fallbackRafId.current);
        fallbackRafId.current = null;
      }
    };
  }, [sectionRefs, rootMargin]);

  return activeSection;
}

Como usar

No componente Header ou outro, pode-se usar o hook assim:

const homeRef = useRef<HTMLElement>(null!);
const aboutRef = useRef<HTMLElement>(null!);
const projectsRef = useRef<HTMLElement>(null!);
const contactRef = useRef<HTMLElement>(null!);

const sectionRefs = useMemo(() => ({
    home: homeRef,
    about: aboutRef,
    projects: projectsRef,
    contact: contactRef,
}), []);

const activeSection = useActiveSection(sectionRefs);

useMemo é usado aqui para garantir que o objeto sectionRefs não seja recriado em cada renderização, o que evita reexecutar o efeito do hook.

E devemos destacar o item ativo no menu:

<a
 href="#home"
 className={activeSection === "home" ? "active" : ""}
>
   Início
</a>

Benefícios

Alta performance (sem polling);
Robusto mesmo com conteúdo assíncrono;
Reutilizável com qualquer estrutura de seções;
Preciso, mesmo com animações ou conteúdo que muda dinamicamente;
Ideal para landing pages, documentações e single-page apps.

Conclusão

O IntersectionObserver é uma ferramenta poderosa. Ao ser combinada com React, permite criar experiências modernas, performáticas e responsivas. Se você está com vontade de sair da bolha do scrollY e entrar no mundo dos eventos inteligentes, esse é o caminho.

Se você curtiu o artigo, compartilhe com outros colegas desenvolvedores e siga para mais conteúdo como este!

Veja o código no GitHub.

DEV Community: Evenilson Liandro

Efeito de máquina de escrever com React usando requestAnimationFrame

O problema de setTimeout ou setInterval

Usar requestAnimationFrame é o caminho

O hook useTypeWriter com React

Exemplos de uso

Conclusão

Como criar um scrollspy moderno com React e IntersectionObserver

Por que devemos evitar scrollY e offsetTop

O IntersectionObserver

Quando utilizar:

Exemplo simples de como a API funciona

Criação do hook useActiveSection com React

Como funciona

Código do hook

Como usar

Benefícios

Conclusão

Conteúdos relacionados

O problema de `setTimeout` ou `setInterval`

Usar `requestAnimationFrame` é o caminho

O hook `useTypeWriter` com React

Por que devemos evitar `scrollY` e `offsetTop`

Criação do hook `useActiveSection` com React