0 Fork 0

Files

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

16 KiB

Raw Permalink Blame History

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

1. Setup inicial do sistema de animações
- 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
- 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
- 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
- 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
- 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
2. Quick win: Remover logo do Hero
- 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
- 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
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

16 KiB Raw Permalink Blame History

Implementation Plan: Premium Animations

Overview

Tasks

Notes

16 KiB

Raw Permalink Blame History