Evandro Fonseca Junior
08dd046887
- 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.
50 lines
4.5 KiB
Markdown
50 lines
4.5 KiB
Markdown
# 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. |