# 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 framer-motion@12.23.12 lenis@1.3.18`
    - 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