evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d00258dcd1a8184bcbed4c41cf780d4e2edb60c7
portifolio-evandrodevbr/.kiro/specs/premium-animations/requirements.md
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

13 KiB
Raw Blame History

Requirements Document

Introduction

Este documento define os requisitos para adicionar animações premium ao portfolio evandro.dev.br, inspiradas no estilo suave e elegante do site on.energy. O objetivo é elevar a experiência visual mantendo a identidade atual (cores, tipografia Monument Extended, paleta --slash #ccff00) e adicionando transições fluidas, scroll-triggered animations, parallax sutil e animações de hover sofisticadas.

Glossary

  • Animation_System: Sistema responsável por gerenciar e executar todas as animações do portfolio
  • Hero_Component: Componente principal da página inicial que exibe o nome e informações do desenvolvedor
  • Scroll_Trigger: Mecanismo que detecta quando elementos entram no viewport para iniciar animações
  • Parallax_Effect: Efeito visual onde elementos se movem em velocidades diferentes durante o scroll
  • Stagger_Animation: Animação sequencial onde elementos aparecem um após o outro com delay
  • Reduced_Motion: Preferência do usuário para reduzir ou desabilitar animações (acessibilidade)
  • Design_System: Conjunto de componentes e estilos reutilizáveis (ds-card, ds-section, etc)
  • Viewport: Área visível da página no navegador do usuário
  • Ease_Curve: Função matemática que define a aceleração/desaceleração de uma animação

Requirements

Requirement 1: Remover Animação de Logo do Hero

User Story: Como usuário, quero ver apenas o texto "evandro.dev.br" no Hero sem alternância com logo, para ter uma experiência mais direta e focada.

Acceptance Criteria

  1. THE Hero_Component SHALL exibir apenas o texto "evandro.dev.br" sem alternar com a logo
  2. THE Hero_Component SHALL remover a fase "logo" do ciclo de animação
  3. THE Hero_Component SHALL manter a animação de digitação (typing) do texto
  4. THE Hero_Component SHALL manter todas as outras funcionalidades existentes (botões, links sociais, status)
  5. WHEN a página carrega, THE Hero_Component SHALL iniciar diretamente com a animação de digitação

Requirement 2: Implementar Scroll-Triggered Animations

User Story: Como usuário, quero ver elementos aparecerem suavemente conforme faço scroll, para ter uma experiência visual mais envolvente e premium.

Acceptance Criteria

  1. WHEN um elemento entra no Viewport, THE Animation_System SHALL iniciar uma animação de fade in + slide up
  2. THE Animation_System SHALL usar uma curva de ease-out suave (cubic-bezier(0.16, 1, 0.3, 1))
  3. THE Animation_System SHALL aplicar scroll-triggered animations em seções (About, Skills, Experience, Projects, WorkModalities, Contact)
  4. THE Animation_System SHALL aplicar scroll-triggered animations em cards dentro das seções
  5. THE Animation_System SHALL detectar elementos quando 20% deles estiverem visíveis no Viewport
  6. THE Animation_System SHALL executar cada animação apenas uma vez (once: true)
  7. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas fade simples sem movimento

Requirement 3: Implementar Stagger Animations

User Story: Como usuário, quero ver elementos de uma lista aparecerem sequencialmente, para ter uma sensação de fluidez e ritmo visual.

Acceptance Criteria

  1. WHEN múltiplos cards aparecem em uma seção, THE Animation_System SHALL aplicar stagger delays entre eles
  2. THE Animation_System SHALL usar delay de 0.08s entre elementos consecutivos
  3. THE Animation_System SHALL aplicar stagger em grids de cards (Projects, Skills, Experience)
  4. THE Animation_System SHALL aplicar stagger em listas de tags e métricas
  5. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL reduzir o delay para 0.03s

Requirement 4: Implementar Parallax Sutil em Backgrounds

User Story: Como usuário, quero ver backgrounds com movimento parallax discreto durante o scroll, para adicionar profundidade visual sem distração.

Acceptance Criteria

  1. WHEN o usuário faz scroll, THE Animation_System SHALL aplicar Parallax_Effect em backgrounds decorativos
  2. THE Parallax_Effect SHALL mover elementos em velocidade 30% mais lenta que o scroll normal
  3. THE Animation_System SHALL aplicar parallax no grid de fundo do Hero
  4. THE Animation_System SHALL aplicar parallax no gradiente radial do Hero
  5. THE Parallax_Effect SHALL ser sutil e não interferir na legibilidade do conteúdo
  6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar completamente o Parallax_Effect

Requirement 5: Implementar Animações de Hover Sofisticadas

User Story: Como usuário, quero ver animações suaves e elegantes ao passar o mouse sobre elementos interativos, para ter feedback visual premium.

Acceptance Criteria

  1. WHEN o usuário passa o mouse sobre um card, THE Animation_System SHALL aplicar lift effect (translateY: -6px)
  2. WHEN o usuário passa o mouse sobre um card, THE Animation_System SHALL aumentar a sombra suavemente
  3. WHEN o usuário passa o mouse sobre botões, THE Animation_System SHALL aplicar scale de 1.03
  4. WHEN o usuário passa o mouse sobre links sociais, THE Animation_System SHALL aplicar rotação sutil (-3deg a 3deg)
  5. THE Animation_System SHALL usar spring physics para animações de hover (stiffness: 200, damping: 20)
  6. THE Animation_System SHALL adicionar glow effect sutil em elementos com cor --slash ao hover
  7. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas mudanças de opacidade

Requirement 6: Implementar Transições de Página Suaves

User Story: Como desenvolvedor, quero ter um sistema de transições entre páginas preparado, para futuras expansões do portfolio com múltiplas páginas.

Acceptance Criteria

  1. THE Animation_System SHALL criar um componente PageTransition reutilizável
  2. WHEN uma página carrega, THE PageTransition SHALL aplicar fade in de 0.4s
  3. THE PageTransition SHALL usar ease-out curve para entrada
  4. THE PageTransition SHALL ser compatível com Next.js App Router
  5. IF Reduced_Motion está ativo, THEN THE PageTransition SHALL reduzir duração para 0.15s

Requirement 7: Implementar Animações de Reveal em Imagens

User Story: Como usuário, quero ver imagens aparecerem com efeito de reveal elegante, para ter uma experiência visual mais sofisticada.

Acceptance Criteria

  1. WHEN uma imagem entra no Viewport, THE Animation_System SHALL aplicar clip-path reveal animation
  2. THE Animation_System SHALL usar clip-path: inset() para criar efeito de cortina
  3. THE Animation_System SHALL combinar reveal com fade in e scale sutil (0.98 → 1)
  4. THE Animation_System SHALL aplicar blur inicial (8px) que remove durante o reveal
  5. THE Animation_System SHALL usar duração de 0.9s para o reveal completo
  6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas fade simples

Requirement 8: Implementar Animações de Reveal em Textos

User Story: Como usuário, quero ver títulos e textos aparecerem com efeito de reveal por caractere ou palavra, para ter uma experiência tipográfica premium.

Acceptance Criteria

  1. WHEN um título de seção entra no Viewport, THE Animation_System SHALL aplicar reveal por palavra
  2. THE Animation_System SHALL usar stagger de 0.04s entre palavras
  3. THE Animation_System SHALL aplicar blur inicial (6px) e scale (0.95) em cada palavra
  4. THE Animation_System SHALL usar clip-path: inset(0 100% 0 0) para efeito de slide horizontal
  5. THE Animation_System SHALL aplicar reveal em títulos de seção (ds-section-title)
  6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL mostrar texto completo com fade simples

Requirement 9: Otimizar Espaçamentos

User Story: Como usuário, quero ver uma página sem espaços vazios desnecessários, para ter uma experiência visual mais compacta e profissional.

Acceptance Criteria

  1. THE Design_System SHALL reduzir padding vertical das seções de var(--sp-20) para var(--sp-16)
  2. THE Design_System SHALL reduzir gap entre cards de var(--sp-6) para var(--sp-5)
  3. THE Hero_Component SHALL reduzir min-height para otimizar espaço vertical
  4. THE Design_System SHALL manter espaçamentos responsivos em mobile
  5. THE Design_System SHALL garantir que mudanças não quebrem o layout existente

Requirement 10: Garantir Performance e Acessibilidade

User Story: Como usuário com preferência de movimento reduzido, quero que o site respeite minhas configurações de acessibilidade, para ter uma experiência confortável.

Acceptance Criteria

  1. THE Animation_System SHALL detectar prefers-reduced-motion do sistema operacional
  2. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar todas as animações complexas
  3. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL manter apenas transições de opacidade simples
  4. THE Animation_System SHALL usar will-change apenas durante animações ativas
  5. THE Animation_System SHALL remover will-change após conclusão das animações
  6. THE Animation_System SHALL usar transform e opacity para animações (GPU-accelerated)
  7. THE Animation_System SHALL evitar animações de propriedades que causam reflow (width, height, margin)
  8. THE Animation_System SHALL limitar animações simultâneas para manter 60fps

Requirement 11: Implementar Smooth Scroll Global

User Story: Como usuário, quero ter scroll suave e fluido em toda a página, para ter uma experiência de navegação premium.

Acceptance Criteria

  1. THE Animation_System SHALL integrar Lenis para smooth scroll global
  2. THE Animation_System SHALL configurar Lenis com duração de 1.2s
  3. THE Animation_System SHALL usar easing: [0.25, 0.0, 0.35, 1.0] para o scroll
  4. THE Animation_System SHALL sincronizar Lenis com requestAnimationFrame
  5. THE Animation_System SHALL aplicar smooth scroll em navegação por âncoras
  6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar smooth scroll

Requirement 12: Implementar Magnetic Effect em Botões

User Story: Como usuário, quero ver botões principais com efeito magnético sutil ao aproximar o cursor, para ter uma experiência interativa premium.

Acceptance Criteria

  1. WHEN o cursor está próximo (raio de 80px) de um botão principal, THE Animation_System SHALL aplicar magnetic effect
  2. THE Animation_System SHALL mover o botão em direção ao cursor proporcionalmente à distância
  3. THE Animation_System SHALL limitar o movimento máximo a 12px em qualquer direção
  4. THE Animation_System SHALL usar spring physics (stiffness: 150, damping: 15)
  5. WHEN o cursor sai da área de influência, THE Animation_System SHALL retornar o botão à posição original
  6. THE Animation_System SHALL aplicar magnetic effect apenas em botões CTA principais
  7. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar magnetic effect

Requirement 13: Implementar Cursor Customizado

User Story: Como usuário, quero ver um cursor customizado que reage aos elementos da página, para ter uma experiência visual mais imersiva e premium.

Acceptance Criteria

  1. THE Animation_System SHALL criar um cursor customizado circular de 40px
  2. THE Animation_System SHALL seguir a posição do mouse com smooth delay de 0.1s
  3. WHEN o cursor está sobre elementos interativos, THE Animation_System SHALL expandir o cursor para 60px
  4. WHEN o cursor está sobre links, THE Animation_System SHALL mudar a cor do cursor para var(--slash)
  5. THE Animation_System SHALL usar mix-blend-mode: difference para contraste automático
  6. THE Animation_System SHALL ocultar o cursor padrão do sistema
  7. THE Animation_System SHALL mostrar cursor padrão em dispositivos touch
  8. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar cursor customizado

Requirement 14: Implementar Loading States Animados

User Story: Como usuário, quero ver estados de loading elegantes durante carregamento de dados, para ter feedback visual claro do progresso.

Acceptance Criteria

  1. WHEN dados estão carregando, THE Animation_System SHALL exibir skeleton screens animados
  2. THE Animation_System SHALL usar shimmer effect nos skeletons
  3. THE Animation_System SHALL manter a estrutura visual da seção durante loading
  4. THE Animation_System SHALL aplicar fade out suave ao remover skeleton (0.3s)
  5. THE Animation_System SHALL aplicar fade in + slide up ao mostrar conteúdo real
  6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar pulse simples sem shimmer

Requirement 15: Implementar Micro-interactions em Formulários

User Story: Como usuário, quero ver feedback visual imediato ao interagir com campos de formulário, para ter uma experiência de preenchimento mais agradável.

Acceptance Criteria

  1. WHEN um campo recebe foco, THE Animation_System SHALL aplicar scale de 1.01 e glow effect
  2. WHEN o usuário digita, THE Animation_System SHALL aplicar pulse sutil no label
  3. WHEN validação ocorre, THE Animation_System SHALL aplicar shake animation em erros
  4. WHEN validação é bem-sucedida, THE Animation_System SHALL aplicar checkmark animado
  5. THE Animation_System SHALL usar spring physics para transições de estado
  6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas mudanças de cor
Reference in new issue View Git Blame Copy Permalink