evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
feat/jogo-zumbis
portifolio-evandrodevbr/hero-circuit-board-plan.md
T
Evandro Fonseca Junior 08dd046887 feat: add animated components for enhanced UI/UX 
- Introduced DrawLine component for drawing animations.
- Added LazyRevealImage component for lazy loading images with reveal animations.
- Implemented TextDiffuseReveal for animated text reveals with staggered effects.
- Created TopProgressBar for a dynamic loading indicator.
- Added PointCloud mock for testing animations.
- Developed useReducedMotion hook to handle user preferences for reduced motion.
- Centralized animation configurations in config.ts for easier management.
- Defined animation variants in variants.ts for consistent animation effects.
- Established AnimationProvider to supply global animation settings.
- Created tests for AnimationProvider and useReducedMotion hook.
- Added SVG assets for branding and UI elements.
- Documented frontend review plan and hero circuit board animation plan.
2026-03-15 21:06:43 -03:00

4.5 KiB
Raw Permalink Blame History

Hero Circuit Board Animation Plan

Goal

Implementar um novo design para o componente Hero.tsx com uma estética "Hardware / Circuit Board", utilizando SVGs animados via Framer Motion para simular trilhas de circuito impresso, mantendo o conteúdo atual (títulos, links, botões) e garantindo alta performance e acessibilidade.

Design Direction & DFII

  • Aesthetic Direction: Industrial / Utilitarian (Cybernetic Hardware). Foco na convergência entre hardware e web moderna.
  • Differentiation Anchor: Um fundo SVG com linhas ortogonais (traços 90° e 45°) que se desenham sutilmente do centro para as bordas (ou vice-versa) reagindo ao scroll ou carregamento inicial, substituindo o letreiro atual.
  • DFII Assessment: Impacto (4) + Context Fit (5) + Viabilidade (4) + Performance (4) - Risco de Consistência (2) = 15 (Excelente).

Tasks

  • Task 1: Preparar o ambiente e limpar o Hero atual

    • Ação: Criar uma branch feature/hero-circuit-board (opcional). Fazer backup mental do componente atual. Remover elementos antigos (Marquee, bg-grid-light) de app/components/Hero.tsx.
    • Verify: O projeto compila sem erros (pnpm run build), o Hero renderiza apenas fundo escuro e o texto central sem as marcações infinitas.

  • Task 2: Extrair o background para um novo componente

    • Ação: Criar o arquivo app/components/animations/CircuitBoardBackground.tsx. Configurar o componente base de UI.
    • Verify: Importar no Hero.tsx e garantir que renderiza um div simples preenchendo a tela por trás do texto sem quebrar o layout.

  • Task 3: Desenhar os caminhos SVG (PCB Traces)

    • Ação: No CircuitBoardBackground.tsx, adicionar um elemento <svg> que ocupe todo o fundo. Criar múltiplos <path> estáticos com ângulos característicos de placas eletrônicas (45° e 90°). Adicionar nós circulares (<circle>) nas extremidades. Usar opacidade baixa para manter sutil.
    • Verify: No navegador, as trilhas da placa de circuito estão visíveis no fundo do Hero, não atrapalhando a legibilidade do texto.

  • Task 4: Animar o desenho dos caminhos com Framer Motion

    • Ação: Converter <svg> e <path> para <motion.svg> e <motion.path>. Aplicar animações usando strokeDasharray e strokeDashoffset (ou propriedades nativas do framer motion como pathLength: 1) para animar a renderização do centro para fora no carregamento (initial e animate).
    • Verify: Ao recarregar a página, as linhas do circuito "crescem" de forma animada até o estado final.

  • Task 5: Animar pontos de dados ("pulsos" ou dados fluindo)

    • Ação: Adicionar pequenos círculos ou feixes de luz que percorrem os caminhos SVG periodicamente, simbolizando dados fluindo pelos barramentos.
    • Verify: A animação tem movimento contínuo (mas muito sutil), validando o efeito estético de hardware ativo.

  • Task 6: Refinar o Conteúdo do Hero e "System Online"

    • Ação: Ajustar cores, espaçamentos e z-index em Hero.tsx para garantir que o texto "EVANDRO.DEV.BR" e a badge "System Online" fiquem totalmente legíveis e contrastem perfeitamente com o novo fundo.
    • Verify: Contrast-ratio acessível; botões e links funcionais no topo das animações SVG.

  • Task 7: Garantir responsividade e Reduced Motion

    • Ação: Ajustar viewBox do SVG para funcionar bem em telas mobile. Garantir suporte ao hook useReducedMotion já existente no Hero, desativando ou encurtando animações longas para quem prefere movimento reduzido.
    • Verify: Animações desligadas/suaves quando o sistema pedir. Nenhum scroll horizontal na tela do mobile (max-w-full).

  • Task 8: Validar performance e arrumar testes

    • Ação: Executar suítes de teste (especialmente de responsividade e animações baseadas em propriedades) para corrigir qualquer erro causado pela mudança no DOM. Corrigir falhas pendentes de chaves duplicadas.
    • Verify: pnpm test passa sem os warnings do framer-motion em elementos normais e sem erros de Experience. (Nota: Consertar testes antigos se possível, mas isolar o teste do Hero).

Done When

  • O componente Hero exibe trilhas de circuito SVG animadas atrás do texto.
  • O carregamento inicial transmite a estética de "hardware sendo ativado".
  • Acessibilidade e regras de contraste de texto estão intactas.
  • Respeita preferência de prefers-reduced-motion.
  • Todos os testes locais e builds não apresentam regressões críticas do frontend.
Reference in new issue View Git Blame Copy Permalink