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.
420 lines
16 KiB
Markdown
420 lines
16 KiB
Markdown
# 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
|