evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
develop
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

219 lines
13 KiB
Markdown
Raw Permalink 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