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
1 parent 0ab6930f92
commit 08dd046887
@@ -0,0 +1,419 @@
+# Implementation Plan: Premium Animations
+
+## Overview
+
+Este plano implementa animações premium no portfolio evandro.dev.br usando Framer Motion e Lenis. A implementação segue uma abordagem incremental, começando com setup e quick wins (remoção do logo), seguindo para scroll-triggered animations (maior impacto visual), hover effects, e finalmente features avançadas como parallax, magnetic buttons e cursor customizado.
+
+Tecnologias: React 19.1.0, Next.js 15.5.9, TypeScript, Framer Motion 12.23.12, Lenis 1.3.18, Tailwind CSS 4.
+
+## Tasks
+
+- [x] 1. Setup inicial do sistema de animações
+  - [x] 1.1 Instalar dependências (Framer Motion 12.23.12, Lenis 1.3.18)
+    - Executar `npm install [email protected] [email protected]`
+    - Verificar instalação no package.json
+    - _Requirements: 2, 11_
+  
+  - [x] 1.2 Criar arquivo de configuração centralizada
+    - Criar `app/lib/animations/config.ts` com animationConfig (easings, durations, scrollTrigger, stagger, parallax, magnetic, cursor, reducedMotion)
+    - Criar `app/lib/animations/variants.ts` com variant presets (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, scaleIn, imageReveal, textReveal, staggerContainer, reducedMotion)
+    - _Requirements: 2, 3, 4, 5, 7, 8, 10_
+  
+  - [x] 1.3 Criar hook useReducedMotion
+    - Criar `app/hooks/useReducedMotion.ts` que detecta prefers-reduced-motion
+    - Usar hook do Framer Motion como base
+    - Retornar boolean indicando se reduced motion está ativo
+    - _Requirements: 10_
+  
+  - [x] 1.4 Criar AnimationProvider
+    - Criar `app/providers/AnimationProvider.tsx` com context para configurações globais
+    - Fornecer reducedMotion, easings, durations via context
+    - Criar hook useAnimationConfig para consumir o context
+    - _Requirements: 10_
+  
+  - [x] 1.5 Integrar AnimationProvider no root layout
+    - Adicionar AnimationProvider em `app/layout.tsx` envolvendo children
+    - Garantir que provider está acima de todos os componentes
+    - _Requirements: 10_
+
+- [x] 2. Quick win: Remover logo do Hero
+  - [x] 2.1 Remover fase logo do Hero component
+    - Editar `app/components/Hero.tsx` removendo a fase "logo" do ciclo de animação
+    - Manter apenas a animação de digitação do texto "evandro.dev.br"
+    - Garantir que animação inicia diretamente com typing
+    - Manter todas as outras funcionalidades (botões, links sociais, status)
+    - _Requirements: 1_
+  
+  - [x] 2.2 Escrever testes para Hero sem logo
+    - Testar que logo não é renderizada
+    - Testar que texto "evandro.dev.br" é exibido
+    - Testar que animação de typing funciona
+    - _Requirements: 1_
+
+- [x] 3. Checkpoint - Verificar setup e quick win
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [ ] 4. Implementar scroll-triggered animations (core)
+  - [~] 4.1 Criar hook useScrollTrigger
+    - Criar `app/hooks/useScrollTrigger.ts` wrapper sobre useInView do Framer Motion
+    - Aceitar options: threshold (default 0.2), once (default true), margin (default "0px")
+    - Retornar ref, isInView, entry
+    - _Requirements: 2_
+  
+  - [~] 4.2 Criar componente ScrollReveal
+    - Criar `app/components/animations/ScrollReveal.tsx`
+    - Aceitar props: children, direction (up/down/left/right), distance (default 24), duration (default 0.6), delay (default 0), threshold (default 0.2), once (default true), className
+    - Usar useScrollTrigger e useReducedMotion
+    - Normal: fade in + slide + blur inicial
+    - Reduced motion: apenas fade in simples
+    - _Requirements: 2, 10_
+  
+  - [~] 4.3 Escrever testes para ScrollReveal
+    - Testar animação normal (fade + slide + blur)
+    - Testar reduced motion (apenas fade)
+    - Testar threshold e once
+    - _Requirements: 2, 10_
+
+- [ ] 5. Implementar stagger animations
+  - [~] 5.1 Criar componente StaggerContainer
+    - Criar `app/components/animations/StaggerContainer.tsx`
+    - Aceitar props: children, staggerDelay (default 0.08), initialDelay (default 0), className
+    - Usar motion.div com variants para stagger automático
+    - Ajustar delay para 0.03s se reduced motion ativo
+    - _Requirements: 3, 10_
+  
+  - [~] 5.2 Escrever testes para StaggerContainer
+    - Testar stagger delay normal (0.08s)
+    - Testar stagger delay com reduced motion (0.03s)
+    - _Requirements: 3, 10_
+
+- [ ] 6. Aplicar scroll animations nas seções principais
+  - [~] 6.1 Envolver seções com ScrollReveal
+    - Aplicar ScrollReveal em About, Skills, Experience, Projects, WorkModalities, Contact
+    - Usar direction="up" e configurações padrão
+    - _Requirements: 2_
+  
+  - [~] 6.2 Aplicar StaggerContainer em grids de cards
+    - Aplicar em Projects grid
+    - Aplicar em Skills grid
+    - Aplicar em Experience list
+    - _Requirements: 3_
+  
+  - [~] 6.3 Aplicar stagger em listas de tags e métricas
+    - Identificar listas de tags em Projects
+    - Identificar métricas em seções
+    - Envolver com StaggerContainer
+    - _Requirements: 3_
+
+- [~] 7. Checkpoint - Verificar scroll animations
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [ ] 8. Implementar hover effects sofisticados
+  - [~] 8.1 Criar hover effects para cards
+    - Adicionar motion.div wrapper em componentes de card
+    - Implementar lift effect (translateY: -6px) no hover
+    - Implementar aumento de sombra no hover
+    - Usar spring physics (stiffness: 200, damping: 20)
+    - Reduced motion: apenas mudança de opacidade
+    - _Requirements: 5, 10_
+  
+  - [~] 8.2 Criar hover effects para botões
+    - Adicionar motion wrapper em botões principais
+    - Implementar scale de 1.03 no hover
+    - Adicionar glow effect sutil em elementos com cor --slash
+    - Usar spring physics
+    - Reduced motion: apenas mudança de opacidade
+    - _Requirements: 5, 10_
+  
+  - [~] 8.3 Criar hover effects para links sociais
+    - Adicionar motion wrapper em links sociais
+    - Implementar rotação sutil (-3deg a 3deg) no hover
+    - Usar spring physics
+    - Reduced motion: apenas mudança de opacidade
+    - _Requirements: 5, 10_
+  
+  - [~] 8.4 Escrever testes para hover effects
+    - Testar lift effect em cards
+    - Testar scale em botões
+    - Testar rotação em links sociais
+    - Testar reduced motion (apenas opacidade)
+    - _Requirements: 5, 10_
+
+- [ ] 9. Implementar smooth scroll global com Lenis
+  - [~] 9.1 Criar LenisProvider
+    - Criar `app/providers/LenisProvider.tsx`
+    - Inicializar Lenis com duration: 1.2, easing: [0.25, 0.0, 0.35, 1.0]
+    - Sincronizar com requestAnimationFrame
+    - Fornecer instância via context
+    - Desabilitar se reduced motion ativo
+    - _Requirements: 11, 10_
+  
+  - [~] 9.2 Integrar LenisProvider no root layout
+    - Adicionar LenisProvider em `app/layout.tsx`
+    - Garantir que está acima de AnimationProvider
+    - _Requirements: 11_
+  
+  - [~] 9.3 Aplicar smooth scroll em navegação por âncoras
+    - Identificar links de navegação interna
+    - Configurar Lenis para smooth scroll em âncoras
+    - _Requirements: 11_
+  
+  - [~] 9.4 Escrever testes para smooth scroll
+    - Testar inicialização do Lenis
+    - Testar desabilitação com reduced motion
+    - _Requirements: 11, 10_
+
+- [~] 10. Checkpoint - Verificar hover effects e smooth scroll
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [ ] 11. Implementar parallax sutil em backgrounds
+  - [~] 11.1 Criar hook useParallax
+    - Criar `app/hooks/useParallax.ts`
+    - Usar useScroll e useTransform do Framer Motion
+    - Aceitar options: speed (default 0.5), direction (vertical/horizontal), disabled
+    - Retornar ref e style
+    - _Requirements: 4_
+  
+  - [~] 11.2 Criar componente ParallaxElement
+    - Criar `app/components/animations/ParallaxElement.tsx`
+    - Usar useParallax e useReducedMotion
+    - Normal: movimento parallax suave
+    - Reduced motion: elemento estático
+    - _Requirements: 4, 10_
+  
+  - [~] 11.3 Aplicar parallax no Hero
+    - Aplicar ParallaxElement no grid de fundo do Hero
+    - Aplicar ParallaxElement no gradiente radial do Hero
+    - Usar speed: 0.3 (30% mais lento)
+    - _Requirements: 4_
+  
+  - [~] 11.4 Escrever testes para parallax
+    - Testar cálculo de posição baseado em scroll
+    - Testar desabilitação com reduced motion
+    - _Requirements: 4, 10_
+
+- [ ] 12. Implementar reveal animado de imagens
+  - [~] 12.1 Criar componente ImageReveal
+    - Criar `app/components/animations/ImageReveal.tsx`
+    - Implementar clip-path reveal + fade in + scale (0.98 → 1) + blur (8px → 0px)
+    - Duração: 0.9s
+    - Usar useScrollTrigger para disparar quando entra no viewport
+    - Reduced motion: apenas fade in simples
+    - _Requirements: 7, 10_
+  
+  - [~] 12.2 Aplicar ImageReveal em imagens do portfolio
+    - Identificar imagens em Projects
+    - Identificar imagens em About
+    - Substituir tags img por ImageReveal
+    - _Requirements: 7_
+  
+  - [~] 12.3 Escrever testes para ImageReveal
+    - Testar clip-path reveal animation
+    - Testar reduced motion (apenas fade)
+    - _Requirements: 7, 10_
+
+- [ ] 13. Implementar reveal animado de textos
+  - [~] 13.1 Criar componente TextReveal
+    - Criar `app/components/animations/TextReveal.tsx`
+    - Implementar reveal por palavra com blur (6px → 0px) + scale (0.95 → 1) + clip-path slide
+    - Stagger delay: 0.04s entre palavras
+    - Usar useScrollTrigger para disparar quando entra no viewport
+    - Reduced motion: texto completo com fade in simples
+    - _Requirements: 8, 10_
+  
+  - [~] 13.2 Aplicar TextReveal em títulos de seção
+    - Identificar títulos com classe ds-section-title
+    - Substituir por TextReveal component
+    - _Requirements: 8_
+  
+  - [~] 13.3 Escrever testes para TextReveal
+    - Testar reveal por palavra
+    - Testar stagger delay
+    - Testar reduced motion (fade simples)
+    - _Requirements: 8, 10_
+
+- [~] 14. Checkpoint - Verificar parallax e reveals
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [ ] 15. Implementar transições de página
+  - [~] 15.1 Criar componente PageTransition
+    - Criar `app/components/animations/PageTransition.tsx`
+    - Implementar fade in de 0.4s com ease-out
+    - Reduced motion: fade in de 0.15s
+    - Compatível com Next.js App Router
+    - _Requirements: 6, 10_
+  
+  - [~] 15.2 Aplicar PageTransition nas páginas
+    - Envolver conteúdo de cada página com PageTransition
+    - Garantir compatibilidade com App Router
+    - _Requirements: 6_
+  
+  - [~] 15.3 Escrever testes para PageTransition
+    - Testar fade in normal (0.4s)
+    - Testar fade in com reduced motion (0.15s)
+    - _Requirements: 6, 10_
+
+- [ ] 16. Implementar magnetic effect em botões
+  - [~] 16.1 Criar hook useMagneticEffect
+    - Criar `app/hooks/useMagneticEffect.ts`
+    - Rastrear posição do mouse
+    - Calcular distância ao elemento
+    - Aplicar transform proporcional com spring physics (stiffness: 150, damping: 15)
+    - Aceitar options: radius (default 80), strength (default 12), disabled
+    - Retornar ref e style
+    - _Requirements: 12_
+  
+  - [~] 16.2 Aplicar magnetic effect em botões CTA principais
+    - Identificar botões CTA principais
+    - Adicionar useMagneticEffect
+    - Desabilitar se reduced motion ativo
+    - _Requirements: 12, 10_
+  
+  - [~] 16.3 Escrever testes para magnetic effect
+    - Testar cálculo de distância
+    - Testar movimento proporcional
+    - Testar desabilitação com reduced motion
+    - _Requirements: 12, 10_
+
+- [ ] 17. Implementar cursor customizado
+  - [~] 17.1 Criar CursorProvider e CustomCursor component
+    - Criar `app/providers/CursorProvider.tsx` com context
+    - Criar `app/components/animations/CustomCursor.tsx`
+    - Implementar cursor circular de 40px que segue o mouse com delay de 0.1s
+    - Expandir para 60px sobre elementos interativos
+    - Mudar cor para var(--slash) sobre links
+    - Usar mix-blend-mode: difference
+    - Ocultar cursor padrão do sistema
+    - Mostrar cursor padrão em touch devices
+    - Desabilitar se reduced motion ativo
+    - _Requirements: 13, 10_
+  
+  - [~] 17.2 Integrar CursorProvider no root layout
+    - Adicionar CursorProvider em `app/layout.tsx`
+    - Garantir que CustomCursor é renderizado
+    - _Requirements: 13_
+  
+  - [~] 17.3 Adicionar data attributes em elementos interativos
+    - Adicionar data-cursor="expand" em botões e cards
+    - Adicionar data-cursor="link" em links
+    - Configurar CustomCursor para reagir aos data attributes
+    - _Requirements: 13_
+  
+  - [~] 17.4 Escrever testes para cursor customizado
+    - Testar seguimento do mouse
+    - Testar expansão sobre interativos
+    - Testar mudança de cor sobre links
+    - Testar desabilitação em touch devices
+    - Testar desabilitação com reduced motion
+    - _Requirements: 13, 10_
+
+- [~] 18. Checkpoint - Verificar features avançadas
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [ ] 19. Implementar loading states animados
+  - [~] 19.1 Criar componente SkeletonLoader
+    - Criar `app/components/animations/SkeletonLoader.tsx`
+    - Implementar shimmer effect
+    - Manter estrutura visual da seção
+    - Reduced motion: pulse simples sem shimmer
+    - _Requirements: 14, 10_
+  
+  - [~] 19.2 Criar transições de loading para conteúdo real
+    - Implementar fade out suave do skeleton (0.3s)
+    - Implementar fade in + slide up do conteúdo real
+    - _Requirements: 14_
+  
+  - [~] 19.3 Aplicar loading states em seções com dados dinâmicos
+    - Identificar seções que carregam dados
+    - Adicionar SkeletonLoader como fallback
+    - _Requirements: 14_
+  
+  - [~] 19.4 Escrever testes para loading states
+    - Testar shimmer effect
+    - Testar transição de skeleton para conteúdo
+    - Testar reduced motion (pulse simples)
+    - _Requirements: 14, 10_
+
+- [ ] 20. Implementar micro-interactions em formulários
+  - [~] 20.1 Criar animações de foco em campos
+    - Adicionar motion wrapper em campos de formulário
+    - Implementar scale de 1.01 e glow effect no foco
+    - Usar spring physics
+    - _Requirements: 15_
+  
+  - [~] 20.2 Criar animações de digitação
+    - Implementar pulse sutil no label quando usuário digita
+    - Usar spring physics
+    - _Requirements: 15_
+  
+  - [~] 20.3 Criar animações de validação
+    - Implementar shake animation para erros
+    - Implementar checkmark animado para sucesso
+    - Usar spring physics
+    - Reduced motion: apenas mudanças de cor
+    - _Requirements: 15, 10_
+  
+  - [~] 20.4 Escrever testes para micro-interactions
+    - Testar animação de foco
+    - Testar pulse no label
+    - Testar shake em erros
+    - Testar checkmark em sucesso
+    - Testar reduced motion (apenas cores)
+    - _Requirements: 15, 10_
+
+- [ ] 21. Otimizar espaçamentos
+  - [~] 21.1 Reduzir padding vertical das seções
+    - Alterar padding de var(--sp-20) para var(--sp-16) em seções
+    - Manter espaçamentos responsivos em mobile
+    - _Requirements: 9_
+  
+  - [~] 21.2 Reduzir gap entre cards
+    - Alterar gap de var(--sp-6) para var(--sp-5) em grids
+    - Garantir que layout não quebra
+    - _Requirements: 9_
+  
+  - [~] 21.3 Otimizar min-height do Hero
+    - Reduzir min-height do Hero para otimizar espaço vertical
+    - Manter proporções visuais adequadas
+    - _Requirements: 9_
+  
+  - [~] 21.4 Escrever testes para espaçamentos
+    - Testar padding das seções
+    - Testar gap entre cards
+    - Testar min-height do Hero
+    - Testar responsividade em mobile
+    - _Requirements: 9_
+
+- [ ] 22. Otimizações de performance
+  - [~] 22.1 Implementar will-change dinâmico
+    - Adicionar will-change apenas durante animações ativas
+    - Remover will-change após conclusão
+    - _Requirements: 10_
+  
+  - [~] 22.2 Auditar propriedades animadas
+    - Garantir que apenas transform e opacity são animados
+    - Remover animações de propriedades que causam reflow (width, height, margin)
+    - _Requirements: 10_
+  
+  - [~] 22.3 Limitar animações simultâneas
+    - Implementar throttling para manter 60fps
+    - Priorizar animações visíveis no viewport
+    - _Requirements: 10_
+  
+  - [~] 22.4 Escrever testes de performance
+    - Testar will-change dinâmico
+    - Testar que apenas transform/opacity são animados
+    - Testar throttling de animações
+    - _Requirements: 10_
+
+- [~] 23. Final checkpoint - Verificar todas as animações
+  - Ensure all tests pass, ask the user if questions arise.
+
+## Notes
+
+- Tasks marcadas com `*` são opcionais e podem ser puladas para MVP mais rápido
+- Cada task referencia requirements específicos para rastreabilidade
+- Checkpoints garantem validação incremental
+- Todas as animações respeitam prefers-reduced-motion para acessibilidade
+- Performance é prioridade: apenas transform e opacity são animados
+- Sistema modular permite reutilização de componentes e hooks